使用css的:before属性在文字前加短竖线

news2024/11/28 0:55:46

有时候我们需要在文字或者标题前加个短竖线,有的人会使用 border 来模拟一个竖线,其实大可不必,我们可以利用元素的 :before 属性来实现,效果如下:

 具体的代码如下,

HTML:

<span class="info-title-title">基本信息</span>

CSS:

.info-title-title {
  position: relative;
  padding-left: 10px;
}
.info-title-title:before {
  content: "";
  background-color: #3796EC;
  width: 3px;
  height: 18px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -9px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/724020.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【计算机网络】第 1 课 - 数据的三种交换方式

欢迎来到博主 Apeiron 的博客&#xff0c;祝您旅程愉快 &#xff01; 时止则止&#xff0c;时行则行。动静不失其时&#xff0c;其道光明。 目录 1、缘起 2、电路交换 3、分组交换 4、三种交换方式的对比 4.1、电路交换优点 4.2、电路交换缺点 4.3、报文交换优点 4.4、…

【抽象拓扑排序】ABC216 D

D - Pair of Balls (atcoder.jp) 题意&#xff1a; 有2*n个球&#xff0c;每个球涂n种颜色&#xff0c;每种颜色恰好涂两个球&#xff0c;把这些球放进m个栈里&#xff0c;每次操作可以弹出两个相同颜色的球&#xff0c;问是否存在方案使得将所有栈清空 思路&#xff1a; 注…

Day44——动态规划part6

完全背包 private static void testCompletePack(){int[] weight {1, 3, 4};int[] value {15, 20, 30};int bagWeight 4;int[] dp new int[bagWeight 1];for (int i 0; i < weight.length; i){ // 遍历物品for (int j weight[i]; j < bagWeight; j){ // 遍历背包…

2023.07.06 homework

1&#xff09;止水夹打开&#xff0c;连通器相通 2&#xff09;左侧水位高11cm 的水位下降 y cm 3&#xff09;右侧水位低 4cm 的水位上涨 x cm 4&#xff09;最终两边水位相等保持一个平面上 11cm - y 4cm x 5&#xff09;左侧的水下降的体积跑哪里去了&#xff0c;填到…

flask和Vue3的前后端数据传输

&#xff08;一&#xff09;基于flask&#xff0c;构建一个后端 后端就采用flask的一般构建方法&#xff0c;然后用 flask-restful 构建一个接口&#xff0c;接口返回为json数据。 datas [{id: 1, name: xag, 年龄: 18}, {id: 2, name: xingag, age: 19}]class UserView(Res…

基于单片机的智能太阳能手机充电器的设计与实现

功能介绍 以STM32/51单片机作为主控系统&#xff1b;LCD1602液晶显示当前电压值&#xff1b;太阳能电池板采集当前光照转换为电能&#xff0c;然后TP4056锂电池充放电模块给锂电池进行充电&#xff0c;充完后自动断电&#xff0c;防过充&#xff1b;通过CE8301模块对锂电池电压…

3D空间的旋转的各种等价形式

旋转矩阵 欧拉轴和角度&#xff08;旋转矢量&#xff09; 欧拉旋转 四元数

如何部署LVS + keepalived 负载均衡高可用集群

目录 一、LVS架构 概念 L4和L7负载均衡的区别 keepalive故障自动切换 抢占与非抢占 二、keepalived管理LVS负载均衡器 LVS集中节点的健康检查 三、部署LVS keeplived 高可用集群 第一步 关闭防火墙和安全机制 第二步 安装工具 第三步 手动配置模块 第四步 编辑策略…

解决OpenJDK 64-Bit Server VM warning

解决OpenJDK 64-Bit Server VM warning: Sharing is only supported for boot loader classes because bootstrap classpath has been appended 问题解决关闭Xshare关闭提示&#xff08;如果你使用的是IDEA的话&#xff09; 问题 在写spring boot项目调试的时候&#xff0c;发…

超級SEO助手,如何批量发布文章?

超級SEO助手,如何批量发布文章&#xff1f; 目前超级SEO助手产品已经正式上线&#xff0c;但是还是有很多同学不会自动化发布文章&#xff0c;所以今天我就详细讲解下整个流程。 在发布文章之前首先确认你已经接入了对应的接口渠道&#xff0c;比如Wordpress、DeDeCMS、Z-Blog、…

FlinkCDC第三部分-同步mysql到mysql,ctrl就完事~

本文介绍了不同源单表-单表同步&#xff0c;不同源多表-单表同步。 Flink版本&#xff1a;1.16 环境&#xff1a;Linux CentOS 7.0、jdk1.8 基础文件&#xff1a;flink-1.16.2-bin-scala_2.12.tgz、flink-connector-jdbc-3.0.0-1.16.jar、flink-sql-connector-mysql-cdc-2.3…

手机也能做3D建模人物,你知道吗?

3D建模人物是当今设计界越来越流行的一个领域。3D建模人物可以指的是使用3D技术来建立和表现各种类型的人物模型。无论是在游戏设计、电影特效还是虚拟现实等领域&#xff0c;3D建模人物都扮演着重要的角色。 与传统的手工绘图相比&#xff0c;现代设计师可以使用各种3D建模软…

全网最细,Fiddler抓包实战教程-辅助接口测试(三)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 AutoResponder 请…

计算机丢失msvcr110.dll解决办法,那种更加简单

"msvcr110.dll" 是一个动态链接库文件&#xff0c;用于支持 Microsoft Visual C 运行时库&#xff08;Runtime Library&#xff09;版本 11.0。它包含了在 Visual C 程序中使用的函数和变量。当一个程序编译完成后&#xff0c;它仍然需要一些运行时库来在操作系统上运…

LLM模型中英文评测基准

文章目录 中文评测基准C-EvalGaokaoAGIEvalPromptCBLUE 英文评测基准MMLUOpen LLM Leaderboard 中文评测基准 Awesome-Chinese-LLM&#xff1a;https://github.com/HqWu-HITCS/Awesome-Chinese-LLM 该项目收集和梳理中文LLM相关的开源模型、应用、数据集及教程等资料&#xff…

软件测试常用设计模式

设计模式的重要原则就是&#xff1a;高内聚、低耦合&#xff1b;通常程序结构中各模块的内聚程度越高&#xff0c;模块间的耦合程度就越低。 数据驱动测试&#xff1a;Data Driven Testing&#xff0c;简称DDT&#xff1b; 数据驱动指的是从数据文件&#xff08;如数据库、Ex…

RabbitMQ-基础学习

在虚拟机上安装Erlang的GCC环境&#xff0c;装erlong&#xff0c;然后安装rabbitmq 参考&#xff1a;安装说明链接 安装web端面板 创建交换机 先学习一下工作模式&#xff08;详细介绍可见官网&#xff09; 上代码 1.Hello Word模式 写在测试类中&#xff1a; Providucer T…

3 springboot更改tomcat的端口和启动时的banner

3.1 更改tomcat端口 点击resources下的application.properties。 然后&#xff0c;添加以下信息&#xff0c;即可把端口号更改为8081。 # 更改项目的端口号 server.port80813.2 更改启动时的banner 首先&#xff0c;进入网站&#xff1a;https://www.bootschool.net/ascii-art…

git切换账户问题

之前一直用另一个github账户提交代码 今天新创建了一个github账户 用这个账户git项目修改后&#xff0c;push时有问题 1 先执行下面命令&#xff0c;切换了用户 git config --local user.name “xxx” git config --local user.email “xxx” 执行 git config user.name 查看…

电脑端anconda的安装和配置

1.下载官网Anaconda | The World’s Most Popular Data Science Platform 1.1如果上述不行就去清华园源下载镜像Index of / 2.点击下载软件安装&#xff0c;按照图的安装步骤就可以了 安装完毕后点击next就可以了 3.测试是否安装配置成功 WINR键调出运行窗口&#xff0c;输入…