使用before、after给文字前后添加横线

作者: 奋斗的小小小兔子 | 来源:发表于2018-09-30 11:57 被阅读4次

使用before、after给文字前后添加横线
利用【伪元素】制作逼真的阴影效果
几行代码实现自定义标题
css 伪类元素详解 (二)
Junit单元测试案例——before & After（测试语言
13.AutoMapper 之映射前后(Before and A
CSS ::before和::after伪元素
Jquery or Javascript 添加HTML对象
使用css伪类before,after制作左右横线中间文字的效果
伪元素before&after以及制作三角箭头

使用before、after给文字前后添加横线

 <div class="reward-title">荣誉资质</div>

css横线居中

.reward-title {
    font-size: 24px;
    font-weight: 400;
    padding-bottom: 52px;
}

.reward-title:before {
    content: '';
    width: 80px;
    height: 1px;
    border-bottom: 1px solid #ccc;
    display: inline-block;
    margin-right: 24px;
    margin-bottom: 10px;
}
.reward-title:after {
    content: '';
    width: 80px;
    height: 1px;
    border-bottom: 1px solid #ccc;
    display: inline-block;
    margin-left: 24px;
    margin-bottom: 10px;
}

demo地址

示例图片

使用before、after给文字前后添加横线
使用before、after给文字前后添加横线 css横线居中 demo地址
利用【伪元素】制作逼真的阴影效果
:before和 :after 伪元素将会在内容元素的前后插入额外的元素，:before将会在内容之前“添加”一个...
几行代码实现自定义标题
在标题左右加上一条横线，以此突出标题，这种样式在开发中很常见，使用css的伪类before、after实现，前面有...
css 伪类元素详解 (二)
::BEFORE/:BEFORE :before 伪元素与:after 类似，都可以为其他 HTML 元素添加内容...
Junit单元测试案例——before & After（测试语言
一、 JUnit使用@Before和@After 在@Before方法中初始化测试资源在@After方法中释放测...
13.AutoMapper 之映射前后(Before and A
映射前后(Before and After Map Action) 你可能偶尔需要在映射发生前后执行自定义逻辑。这...
CSS ::before和::after伪元素
使用CSS伪元素，before and after 画出一个五角星 before 和 after 顾名思义其就是...
Jquery or Javascript 添加HTML对象
原始HTML 需要在文本框后添加坐标拾取按钮实现效果尝试方法使用 before、after，直接追加 HTM...
使用css伪类before,after制作左右横线中间文字的效果
其实这个在功能在项目中还是经常会需要到的，除了使用背景图片来实现外，我们还可以借助css伪类before,afte...
伪元素before&after以及制作三角箭头
1.:before伪元素和:after伪元素是干嘛用的它们会在内容元素的前后插入额外的元素，:before伪元素...