html字两边的横线_CSS 中间文字、两侧居中横线（使用伪类before，after）

本文再介绍一种关于文字与横线的关系，中间文字，两侧横线，主要方法：CSS伪类before，after制作左右横线中间文字效果

HTML：

Welcome to Snapshot

CSS：.container{

width: 800px;

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: 29%;

height: 2px;

}

h3.title span:before{

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

}

h3.title span:after {

right: 5%;

}

html字两边的横线_CSS 中间文字、两侧居中横线（使用伪类before，after）相关推荐

文字两侧加横线的解决方案
文字两侧加横线的解决方案参考文章: (1)文字两侧加横线的解决方案 (2)https://www.cnblogs.com/-simon/p/5883424.html (3)https://www.c ...
android 文字横线_Android实现文字下方加横线
本文实例为大家分享了Android实现文字下方加横线的具体代码,供大家参考,具体内容如下 public class WhiteTextviewWithWhiteBottomLine extends L ...
html文本居中左右有横线,CSS伪类实现中间文字两边横线效果
利用CSS伪类实现中间文字两边横线效果效果图: 实现代码: CSS伪类实现中间文字两边横线效果 body { margin: 0; } .login_content { position: abso ...
php 横线,文字下面加横线怎么弄
文字下面加横线怎么弄? 文字下面加横线的操作方法如下: 1.打开"编辑"菜单,选择"替换"命令或按Ctrl+H(快捷键): 2.光标定位在"查找内容& ...
html字两边的横线_css实现中间文字两边横线效果
1. vertical-align属性实现效果: vertical-align 属性设置元素的垂直对齐方式. 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐.允许指定负长度值和百分比值. ...
html字两边的横线_css实现中间文字，两边横线效果
1. vertical-align属性实现效果: vertical-align 属性设置元素的垂直对齐方式. 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐.允许指定负长度值和百分比值. ...
html字两边的横线_css如何实现中间文字，两边横线的标题效果？（代码示例）...
本篇文章给大家带来的内容是介绍css如何实现中间文字,两边横线的标题效果?(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 1. vertical-align属性实现效果 ...
html字两边的横线_css怎么在文字两边加上横线,word文字两边加横线
css怎么在文字两边加上横线CSS怎么在文本两侧添加水平线,在css中,可以使用:before.after和content属性在文本两侧添加横线:语法"e:在前,e:在后{内容:" ...
html字两边的横线_css实现中间文字两边横线(原创）
/* 方法1:*/ body { background:#fff; width:888px; margin:15px auto; } .con { position:relative; height: ...

html字两边的横线_CSS 中间文字、两侧居中横线（使用伪类before，after）

Welcome to Snapshot

html字两边的横线_CSS 中间文字、两侧居中横线（使用伪类before，after）相关推荐

最新文章

热门文章