Title body{background: #f0f0f0} .con{position:relative;height:1.875rem;line-height: 1.875rem;margin:2.47rem auto;text-align: center;} .con i{display:block;height:1px;background:#e1e1e1;position:absolute;top:0.9rem;width:100%;} .con p{ display:inline-block;font-size:...
怎么在文字两边加横线css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{background: #f0f0f0}
.con{position:relative;height:1.875rem;line-height: 1.875rem;margin:2.47rem auto;text-align: center;}
.con i{display:block;height:1px;background:#e1e1e1;position:absolute;top:0.9rem;width:100%;}
.con p{
display:inline-block;
font-size: 0.75rem;
color:#c1c1c1;
background:rgba(240,240,240,1);
padding:0 1.875rem;
text-align: center;
margin:0 auto;
position:relative;
z-index:2;}
</style>
</head>
<body>
<div class="con">
<i></i>
<p>到底了</p>
</div>
</body>
</html>
这里使用了背景色和透明度,细心的人可能会发现,body设置的背景色刚好是‘到底了’的文字的背景色,同时也用了行内块、透明度以及相对定位来实现了的噢。
2020-10-28