用css伪类:before,:after前后插入线
用css伪类:before,:after前后插入线
闫亚亚 发表于1年前
用css伪类:before,:after前后插入线
  • 发表于 1年前
  • 阅读 22
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

经常遇到这种情况:

<span class="or">Snapshot</span>

css中:

首先

.or{display: block;position: relative;text-align: center;font-size: 20px;}// 

/*设置为块级元素会独占一行形成上下居中的效果*/

加相对定位是为了:/*定位横线(当横线的父元素)*/

.or:before,.or:after{
content: "";/*CSS伪类用法*/
position: absolute;/*定位背景横线的位置*/
width:45%;/*宽和高做出来的背景横线*/
height:2px;
background:#CCCCCC;
top:15px;}
 

 

另外一种简单的办法:

<div class="line-left-right">分割线</div>

给这个.line-left-right设置:

.line-left-right{
padding:0 20px 0px;
margin:20px 0px;
line-height:1px;
border-left:100px solid red;
border-right:100px solid red;
text-align:center;
}

 

共有 人打赏支持
粉丝 1
博文 57
码字总数 17970
×
闫亚亚
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: