Question

我需要在文本前后显示带有点和线的文本，如下面的屏幕截图所示。

文本应显示在一行中。这是我试过的代码：

＆＃13;

.before-text:before {
  content: "•";
}

.before-text:after {
  content: "";
  border-bottom: 1px solid black;
  width: 200px;
  position: absolute;
  margin-top: 7px;
}

.after-text:before {
  content: "";
  border-bottom: 1px solid black;
  width: 200px;
  position: absolute;
  margin-top: 7px;
}

.after-text:after {
  content: "•";
}

＆＃13;

<span class="before-text"></span>
<div>Long long long text</div>
<span class="after-text"></span>

＆＃13;

Answer 1

您可以使用以下代码执行此操作： after和before伪将在左侧和右侧应用点，文本将以位置属性为中心。

＆＃13;

* {
  margin: 0px;
  padding: 0px;
}

.text--line {
  width: 100%;
  height: 1px;
  background: red;
  position: relative;
  line-height: 0px;
  margin-top: 20px;
  text-align: center;
}

.text--line:before {
  content: "•";
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 2;
}

.text--line:after {
  content: "•";
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 2;
}

.text--line span {
  background: #fff;
  padding: 0 5px;
}

＆＃13;

<div class="text--line">

  <span>I am text</span>
</div>

＆＃13;

Answer 2

如果你不介意flex-box而你不需要完全相同的代码，你可以尝试以下方法：

.container {
  display: flex;
  align-items: center;
}

.before-text,
.after-text {
  position: relative;
  display: block;
  width: 200px;
  height: 1px;
  background: black;
  display: flex;
  align-items: center;
}

.before-text {
  justify-content: flex-start;
}

.after-text {
  justify-content: flex-end;
}

.before-text:before,
.after-text:after {
  display: block;
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background: black;
}

<div class="container">
  <span class="before-text"></span>
  <div>Long long long text</div>
  <span class="after-text"></span>
</div>

Answer 3

Somethimes我用这个：

<html>
   <head>
      <style>
         span.words::before {content: "•--------"}
         span.words::after {content: "--------•"}
      </style>
   </head>
<body>
   <span class="words">your text here</span>
</body>
</html>

但最可能的是我不理解你的问题。

Answer 4

这可能对您有帮助，只需编辑我使用的行

span:before {
  content: "•----------------";
}

span:after {
   content: "----------------•";
}

<span>Long long long text</span>

要在单行中显示的文本

4 个答案: