css文字右边加横线,CSS伪类before，after制作左右横线中间文字效果

Title

.container{

width: 1000px;

margin: 10px auto;

border: 1px solid red;

}

h3.title {

color: #F2AE11;

font-size: 1.3em;

margin-bottom: 3em;

text-align: center;

font-weight: 500;

line-height: 1.1;

}

h3.title span {

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

font-size: 3em;

color: #212121;

position: relative; /*定位横线(当横线的父元素)*/

}

h3.title span:before, h3.title span:after {

content: ''; /*CSS伪类用法*/

position: absolute; /*定位背景横线的位置*/

top: 52%;

background: #494949; /*宽和高做出来的背景横线*/

width: 9%;

height: 2px;

}

h3.title span:before{

left: 25%; /*调整背景横线的左右距离*/

}

h3.title span:after {

right: 25%;

}

Welcome to Snapshot

总结：

1，这种方法比利用边框和背景图做出的效果更好更利于控制和修改

2，缺点是伪类在IE8上兼容有些问题

css文字右边加横线,CSS伪类before，after制作左右横线中间文字效果相关推荐

[css] 你知道什么是动态伪类吗？
[css] 你知道什么是动态伪类吗? 锚点伪类(a标签) 1.:link 未操作的链接 2.:visited 该链接已被访问,一旦:visited,:link/:active不再起作用.用户行为伪类 ...
使用CSS3伪类元素（::before|::after）对文字进行美化
如果要想把一个文字的分成两半分别设置成不同的颜色,你是不是第一时间只想到通过PS来实现呢,不过有一个不好的地方就是图片会占用更多的资源.所以下面就给大家介绍一个通过CSS的伪类元素来美化文字的方法. ...
html设置横线中间的字,CSS伪元素before,after制作左右横线中间文字效果
效果图 Title .container{ width: 1000px; margin: 10px auto; border: 1px solid red; } h3.title { color: # ...
CSS回顾总结（二）——伪类、伪元素、子元素和后代元素选择器、盒子模型
目录伪类伪元素子元素和后代元素选择器盒子模型边距边框边框样式内联元素盒子模型伪类伪类:专门用来表示元素的一种特殊状态 * 比如:访问过的超 ...
谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
HTML与CSS基础之子元素的伪类(七)
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>子元素 ...
HTML/CSS: 浅谈a标签及伪类选择器
1.基础知识 "超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分." -HTML链接而对于超文本,简单的说便是 ...
html 中内联样式表,html – CSS带有内联样式的伪类
不,这是不可能的.在使用CSS的文档中,内联样式属性只能包含属性声明;在样式表中的每个规则集中出现的同一组语句.从 Style Attributes spec: The value of the st ...
CSS之选择器（三）伪类选择器
上文介绍了一些常用的复合选择器,现在再补充一些不常用但有必要了解的一些复合选择器和属性选择器. 2.复合选择器复合选择器补充选择器示例示例说明兄弟选择器(一) #l1+li 选择和id值为l ...

css文字右边加横线,CSS伪类before，after制作左右横线中间文字效果

Welcome to Snapshot

css文字右边加横线,CSS伪类before，after制作左右横线中间文字效果相关推荐

最新文章

热门文章