Question

我尝试在CSS中实现类似的功能：

文字应位于容器中心，背景填充5px 20px和“横向填充 20px 。。

我尝试使用:: before和:: after元素来实现它，但输出并不像我需要的那样，请看下面的代码......

Codepen ：https://codepen.io/serhio/pen/XRYgxo?editors=1100

header {
  font-weight: bold;
  background: lightblue;
  text-align: center;
  border-radius: 5px;
  display: inline-block;
  padding: 5px 20px;  
}

header::before {
  width: 20px;
  height: 2px;
  background: blue;  
  display: inline-block;
  content: '';
}
header::after {
  width: 20px;
  height: 2px;
  background: red;  
  display: inline-block;
  content: '';
}

<header>Quisque tincidunt</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt non leo nec posuere. Nunc nec tellus nec mi convallis dapibus. Praesent vel varius tortor. Aenean et ornare lectus. Curabitur gravida leo eu est laoreet, ac laoreet leo congue. Mauris tempor sit amet orci quis molestie. Maecenas scelerisque neque nec metus tincidunt tristique. Proin vestibulum erat eu libero laoreet semper.</p> 
<header>Donec sed</header>
<p>Vivamus id commodo sem. Donec sed maximus metus. Vivamus arcu risus, tincidunt non sagittis at, cursus interdum leo. Etiam ac orci at magna commodo fermentum. Donec sed enim auctor, dictum felis id, suscipit nisl. Maecenas facilisis, quam fermentum ultrices gravida, lacus ante tincidunt arcu, vel aliquet dolor felis sit amet nulla. Aliquam erat volutpat. Duis quis iaculis sapien. Morbi commodo id enim eget sodales. Donec eu odio nec nibh sodales pharetra porta vitae dui. Aliquam sollicitudin, ipsum et aliquet tincidunt, purus quam commodo elit, vitae fringilla justo velit at eros. Sed egestas, orci id finibus congue, orci sem posuere lectus, vel sollicitudin massa ex eu sapien. Fusce ut orci a metus tincidunt cursus vel eleifend quam. Phasellus felis est, venenatis et ligula in, ornare faucibus sem.</p>

<p>Pellentesque ac magna eu urna vulputate gravida sit amet ac risus. Sed commodo risus ut convallis tristique. Phasellus nec sapien porttitor, finibus mi sit amet, bibendum purus. Maecenas sapien nunc, fermentum eu leo vitae, vehicula ultricies magna. Nunc elementum, mi at scelerisque sollicitudin, justo turpis maximus urna, eu pharetra libero eros eu felis. Pellentesque bibendum metus dapibus odio vestibulum, vulputate commodo libero convallis. Pellentesque tristique elit sit amet cursus imperdiet. Integer porttitor libero dolor, ac varius nulla ultricies non.</p>
<header>Sed commodo risus</header>
<p>Curabitur eu nunc at ante ultricies blandit ut a eros. Quisque ultrices posuere nunc ac tempor. Aliquam tristique erat nisl, eget condimentum nulla ullamcorper non. Fusce bibendum dictum lacus sit amet auctor. Quisque molestie purus sit amet rutrum egestas. Aenean nulla turpis, finibus eget porta ac, tincidunt euismod mauris. Sed ac velit sit amet ante vestibulum pharetra.</p>

Answer 1

您可以添加:before＆amp; :after使用position:absolute

header {
  font-weight: bold;
  background: lightblue;
  text-align: center;
  border-radius: 5px;
  display: inline-block;
  padding: 5px 20px; 
  position:relative;
  margin:0 20px
}

header::before {
  width: 20px;
  height: 2px;
  background: blue;  
  display: inline-block;
  content: '';
  position: absolute;
  left: -20px;
  top: 50%;
  transform:translateY(-50%);
}
header::after {
  width: 20px;
  height: 2px;
  background: red;  
  display: inline-block;
  content: '';
  position: absolute;
  right: -20px;
  top: 50%;
  transform:translateY(-50%);
}

<header>Quisque tincidunt<br/> Quisque tincidunt</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt non leo nec posuere. Nunc nec tellus nec mi convallis dapibus. Praesent vel varius tortor. Aenean et ornare lectus. Curabitur gravida leo eu est laoreet, ac laoreet leo congue. Mauris tempor sit amet orci quis molestie. Maecenas scelerisque neque nec metus tincidunt tristique. Proin vestibulum erat eu libero laoreet semper.</p>
<header>Donec sed</header>
<p>Vivamus id commodo sem. Donec sed maximus metus. Vivamus arcu risus, tincidunt non sagittis at, cursus interdum leo. Etiam ac orci at magna commodo fermentum. Donec sed enim auctor, dictum felis id, suscipit nisl. Maecenas facilisis, quam fermentum ultrices gravida, lacus ante tincidunt arcu, vel aliquet dolor felis sit amet nulla. Aliquam erat volutpat. Duis quis iaculis sapien. Morbi commodo id enim eget sodales. Donec eu odio nec nibh sodales pharetra porta vitae dui. Aliquam sollicitudin, ipsum et aliquet tincidunt, purus quam commodo elit, vitae fringilla justo velit at eros. Sed egestas, orci id finibus congue, orci sem posuere lectus, vel sollicitudin massa ex eu sapien. Fusce ut orci a metus tincidunt cursus vel eleifend quam. Phasellus felis est, venenatis et ligula in, ornare faucibus sem.</p>

<p>Pellentesque ac magna eu urna vulputate gravida sit amet ac risus. Sed commodo risus ut convallis tristique. Phasellus nec sapien porttitor, finibus mi sit amet, bibendum purus. Maecenas sapien nunc, fermentum eu leo vitae, vehicula ultricies magna. Nunc elementum, mi at scelerisque sollicitudin, justo turpis maximus urna, eu pharetra libero eros eu felis. Pellentesque bibendum metus dapibus odio vestibulum, vulputate commodo libero convallis. Pellentesque tristique elit sit amet cursus imperdiet. Integer porttitor libero dolor, ac varius nulla ultricies non.</p>
<header>Sed commodo risus</header>
<p>Curabitur eu nunc at ante ultricies blandit ut a eros. Quisque ultrices posuere nunc ac tempor. Aliquam tristique erat nisl, eget condimentum nulla ullamcorper non. Fusce bibendum dictum lacus sit amet auctor. Quisque molestie purus sit amet rutrum egestas. Aenean nulla turpis, finibus eget porta ac, tincidunt euismod mauris. Sed ac velit sit amet ante vestibulum pharetra.</p>

Answer 2

您可以使用position: absolute

尝试这样的操作

header {
  font-weight: bold;
  background: lightblue;
  text-align: center;
  border-radius: 5px;
  display: inline-block;
  padding: 5px 20px;  
  position: relative;
  margin: 0 20px;
  border: 2px solid blue;
}

header::before,
header::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background: blue;  
  display: block;
  content: '';
}

header::before {
  left: -20px;
}
header::after {
  right: -20px;
}

<header>Quisque tincidunt</header>

或创建一个单行，并将其巧妙地放置如下：

header {
  font-weight: bold;
  background: lightblue;
  text-align: center;
  border-radius: 5px;
  display: inline-block;
  padding: 5px 20px;  
  position: relative;
  margin: 0 20px;
  border: 2px solid blue;
}

header::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 40px);
  height: 2px;
  display: block;
  background: blue;  
  z-index: -1;
}

<header>Quisque tincidunt</header>

Answer 3

您可以使用简单的伪类:after :before

＆＃13;

header {
  font-weight: bold;
  background: lightblue;
  text-align: center;
  border-radius: 5px;
  display: inline-block;
  padding: 5px 20px;  
  position: relative;
  margin: 0 30px 20px;
}

header::before {
  width: 20px;
  height: 2px;
  background: blue;  
  position: absolute;
  top: 50%;
  margin-top: -1px;
  content: '';
  right: 100%;
}
header::after {
  width: 20px;
  height: 2px;
  margin-top: -1px;
  background: red;  
  position: absolute;
  top: 50%;
  content: '';
  left: 100%;
}

＆＃13;

<header>Quisque tincidunt</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt non leo nec posuere. Nunc nec tellus nec mi convallis dapibus. Praesent vel varius tortor. Aenean et ornare lectus. Curabitur gravida leo eu est laoreet, ac laoreet leo congue. Mauris tempor sit amet orci quis molestie. Maecenas scelerisque neque nec metus tincidunt tristique. Proin vestibulum erat eu libero laoreet semper.</p>
<header>Donec sed</header>
<p>Vivamus id commodo sem. Donec sed maximus metus. Vivamus arcu risus, tincidunt non sagittis at, cursus interdum leo. Etiam ac orci at magna commodo fermentum. Donec sed enim auctor, dictum felis id, suscipit nisl. Maecenas facilisis, quam fermentum ultrices gravida, lacus ante tincidunt arcu, vel aliquet dolor felis sit amet nulla. Aliquam erat volutpat. Duis quis iaculis sapien. Morbi commodo id enim eget sodales. Donec eu odio nec nibh sodales pharetra porta vitae dui. Aliquam sollicitudin, ipsum et aliquet tincidunt, purus quam commodo elit, vitae fringilla justo velit at eros. Sed egestas, orci id finibus congue, orci sem posuere lectus, vel sollicitudin massa ex eu sapien. Fusce ut orci a metus tincidunt cursus vel eleifend quam. Phasellus felis est, venenatis et ligula in, ornare faucibus sem.</p>

<p>Pellentesque ac magna eu urna vulputate gravida sit amet ac risus. Sed commodo risus ut convallis tristique. Phasellus nec sapien porttitor, finibus mi sit amet, bibendum purus. Maecenas sapien nunc, fermentum eu leo vitae, vehicula ultricies magna. Nunc elementum, mi at scelerisque sollicitudin, justo turpis maximus urna, eu pharetra libero eros eu felis. Pellentesque bibendum metus dapibus odio vestibulum, vulputate commodo libero convallis. Pellentesque tristique elit sit amet cursus imperdiet. Integer porttitor libero dolor, ac varius nulla ultricies non.</p>
<header>Sed commodo risus</header>
<p>Curabitur eu nunc at ante ultricies blandit ut a eros. Quisque ultrices posuere nunc ac tempor. Aliquam tristique erat nisl, eget condimentum nulla ullamcorper non. Fusce bibendum dictum lacus sit amet auctor. Quisque molestie purus sit amet rutrum egestas. Aenean nulla turpis, finibus eget porta ac, tincidunt euismod mauris. Sed ac velit sit amet ante vestibulum pharetra.</p>

＆＃13;

Answer 4

利用标题上的位置相对位置和绝对位置:: before和:: after内容，运行代码片段以查看其工作原理

＆＃13;

Logger

＆＃13;

header {
  position: relative;
  font-weight: bold;
  background: lightblue;
  text-align: center;
  border-radius: 5px;
  display: inline-block;
  padding: 5px 40px;  
}

header::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 20px;
  width: 20px;
  height: 2px;
  margin-top: -1px;
  background: blue;  
  
}
header::after {  
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  width: 20px;
  height: 2px;
  margin-top: -1px;
  background: red;  
  
}

＆＃13;

在CSS中的文本效果下面的行

4 个答案: