有时候我们需要在文字或者标题前加个短竖线，有的人会使用 border 来模拟一个竖线，其实大可不必，我们可以利用元素的 :before 属性来实现，效果如下：
具体的代码如下，
HTML：文章来源：https://www.toymoban.com/news/detail-528274.html
<span class="info-title">基本信息</span>CSS：文章来源地址https://www.toymoban.com/news/detail-528274.html
.info-title {
position: relative;
padding-left: 10px;
}
.info-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;
}到了这里，关于使用css的:before属性在文字前加短竖线的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
