修改

Question

This is the image link

这是描述的油漆图像

我需要在下面创建如下内容。

._____________ mytext__________。

hr上面的文字将位于中心位置。

Answer 1

您可以使用after伪元素

制作类似的内容

hr{
  position: relative;
}

hr::after{
  content: 'Test text';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 0 20px;
}

<hr />

编辑：因为在开始和结束时你都不能使用我的方法所以这将有助于你：

.separator{
  width: 100%;
  border-bottom: 2px solid #000;
  position: relative;
}

.separator::before,
.separator::after{
  content: '';
  width: 10px;
  height: 10px;
  display: block;
  position: absolute;
  top: calc(50% + 1px);
  transform: translateY(-50%);
  background: #000;
  border-radius: 50%;
}

.separator::before{
  left: 0;
}

.separator::after{
  right: 0;
}

.separator__text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 0 10px;
}

<div class="separator">
    <span class="separator__text">Test text</span>
</div>

Answer 2

您可以使用父div执行此操作。这里的想法是下划线是div的一部分，然后在span中创建一个覆盖div下划线的白色下划线：

＆＃13;

div {
  border-bottom:1px solid #000;
  text-align:center;
  display:inline-block;
  width:calc(100% - 8px);
}
span {
  border-bottom: 3px solid #fff;
}

＆＃13;

.<div><span>My text</span></div>.

＆＃13;

修改

我已将点添加到div的任一侧，然后将width设置为略小于容器的整个宽度，以考虑点的宽度。< / p>

Answer 3

您可以使用<div>

进行制作

<div class="divider">
<span>Text</span>
</div>

为此设计样式：

.divider {
    text-align: center;
    position: relative;
    top: 2px;
    padding-top: 1px;
    line-height: 0;
}

.divider::before {
    content: "";
    width: 100%;
    background-color: transparent;
    display: block;
    height: 1px;
    border-top: 1px solid #e7e7e7;
    position: absolute;
    top: 50%;
    margin-top: -1px;
    z-index: 1;
}

.divider h6 {
    line-height: 1;
    font-size: 12px;
    color: #767676;
    font-weight: 400;
    z-index: 2;
    position: relative;
    display: inline-block;
    background-color: #fff;
    padding: 0 8px 0 7px;
}

Answer 4

Here's an example使用<h1>和<span>代码。

＆＃13;

h1 {
  text-align: center;
  position: relative;
  background: white;
}

h1:after {
  content: '';
  height: 1px;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  background: black;
  z-index: 1;
}

h1 span {
  background: white;
  padding: 0 10px;
  position: relative;
  z-index: 2;
}

＆＃13;

<h1><span>Title</span></h1>

＆＃13;

Answer 5

hr:before{

  background-color:#fff;
  position:absolute;
  content:attr(data-text);
  margin:0 auto;
  top:-12px;
  left:50%;
  padding:0 1%;
}
hr{
  position:relative;
  border-width:2px;
  border-bottom-width:1px;
  border-style:solid;
  border-color:transparent black black black; 
}

<hr data-text='my text'/>

Answer 6

我也建议另一种解决方案，但也许这就是你要找的东西：

HTML：

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <p>Hello Plunker!</p>
    <hr>
  </body>

</html>

的CSS：

/* Styles go here */
p{
  width: 100%;
  text-align: center;
  float: left;
  margin-bottom: -4px;
}

https://plnkr.co/edit/YjYKkPxDOtRQzYDJrfmT?p=preview

在css中设置<hr />元素的样式

6 个答案:

修改