css实现字两边加横线 |翻转导航css

css样式line，css字体缩小了，什么是css的作用，css横向平铺怎么设置，css制作会员登陆表单，css border边框颜色半透明，翻转导航css css实现字两边加横线 |翻转导航css

/*首先，大家先设置字的样式*/
span {
background-color: white;/*设置背景颜色为白色，遮盖住字*/
padding: 0 10px;/*设置左右边距，让横线能够清晰显示*/
position: relative;/*设置相对定位*/
}
/*然后，大家再设置横线的样式*/
span:before,
span:after {
content: "";/*设置content为空*/
position: absolute;/*设置绝对定位*/
border-bottom: 1px solid black;/*设置下边框为实线黑色*/
width: 50%;/*设置宽度为父元素的50%*/
bottom: 0;/*设置位置在父元素的底部*/
}
/*span:before是在span元素的前面生成横线，span:after是在span元素的后面生成横线*/
/*接着，大家再设置横线的位置*/
span:before {
left: 0;/*设置在左边*/
}
span:after {
right: 0;/*设置在右边*/
}

这样，大家就可以通过CSS实现字的两边加上横线的效果。代码如下：

<p>这是一段<span>带横线的字</span>的例子。</p>

效果如下：

这是一段带横线的字的例子。