如何将文本居中：在伪元素之前？

Question

我有这样的代码：

span {
  border-radius: 50%;
  background-color: #d8d9dd;
  border: 6px solid #262c40;
  width: 25px;
  height: 25px;
  margin: 30px 0 0 40px;
  display: block;
}
span:before {
  content: attr(data-value);
  position: relative;
  white-space: pre;
  display: inline;
  top: -27px;
  left: -29px;
  width: 200px;
  text-align: center;
}

<span data-value="November 2016"></span>
<span data-value="May 2016"></span>

如何将 :before 伪元素内的文本置于跨度的中间？可以吗？

Answer 1

最好的办法是使用流行的居中技术相对于 before

span

伪元素绝对

定位

：

top: 0;
left: 50%;
transform: translate(-50%, -25px);

请注意，-25px 是为了偏移圆圈上方的文本（高度为 25px） - 请参阅下面的演示：

span {
  border-radius: 50%;
  background-color: #d8d9dd;
  border: 6px solid #262c40;
  width: 25px;
  height: 25px;
  margin: 30px 0 0 40px;
  display: block;
  position:relative;
}
span:before {
  content: attr(data-value);
  position: absolute;
  white-space: pre;
  display: inline;
  top: 0;
  left: 50%;
  transform: translate(-50%, -25px);
}

<span data-value="November 2016"></span>
<span data-value="May 2016"></span>

来源

Answer 2

来自MDN：

[

:before

伪元素]默认是内联的

给内联元素添加

width

没有任何作用，因此您需要将其样式设置为

display: block

（或

inline-block

，如果更合适的话）。事实证明，您需要将

left

值调整为大约

-88px

才能使文本位于圆的中心。

span {
  border-radius: 50%;
  background-color: #d8d9dd;
  border: 6px solid #262c40;
  width: 25px;
  height: 25px;
  margin: 30px 0 0 40px;
  display: block;
}
span:before {
  content: attr(data-value);
  position: relative;
  white-space: pre;
  display: inline;
  top: -27px;
  left: -88px;
  width: 200px;
  text-align: center;
  display: block;
}

<span data-value="November 2016"></span>
<span data-value="May 2016"></span>

Answer 3

我建议不要使用负面翻译。如果您做得不够仔细，它可能最终会超出视口。

此外，您不应该插入带有伪元素的内容。伪元素只能用于样式目的。像这样：

body {
  display: inline-block;
}
span {
  display: block;
  text-align: center;
}
span:after {
  content: '';
  border-radius: 50%;
  background-color: #d8d9dd;
  border: 6px solid #262c40;
  width: 25px;
  height: 25px;
  margin: 10px auto 30px;
  display: block;
}

<span>November 2016</span>
<span>May 2016</span>

由于

text-align: center

，跨度内的文本居中。

由于

margin-left: auto

和

margin-right: auto

，伪元素圆居中。

Answer 4

我们应该使用逻辑代码，而不是任何点击和追踪以及玩弄数字！

我在伪元素中使用了flex，使其首先在span元素上居中。

然后我使用变换来逻辑地定位伪元素。

/*styling to just make the presentation look good*/
body{
  border:5px solid black;
  padding:50px;
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
}

/* main stylings start here*/
span {
  border-radius: 50%;
  background-color: #d8d9dd;
  border: 6px solid #262c40;
  width: 25px;
  height: 25px;
  margin: 30px 0 0 40px;
  display: block;
}
span:before {
  content: attr(data-value);
  width:150px;
  border:solid black 1px;
  
  /*use flex to center it to middle & upon the span*/
  display:flex;
  justify-content:center;
  align-items:center;
  
  /*use transform and position it LOGICALLY (by considering border widths of the parent span and ofcourse using calc() )*/
  transform: translate(calc(-50% + 2 * 6px), calc(-100% - 6px));
}

<span data-value="November 2016"></span>
<span data-value="May 2016"></span>

我会要求使用逻辑代码而不是破坏设计的命中和跟踪值。 编写响应代码。快乐编码！

Answer 5

我被打败了，但这是我的解决方案：

span {
   border-radius: 50%;
   background-color: #d8d9dd;
   border: 6px solid #262c40;
   width: 25px;
   height: 25px;
   margin: 30px 0 0 40px;
   display: block;
}
span:before {
   content: attr(data-value);
   position: relative;
   white-space: pre;
   display: inline-block;
   top: -27px;
   left: -50px;
   width: 125px;
   text-align: center;
}

变化是在

inline-block

样式上使用

:before

显示，并调整文本的

left

和

width

。

Answer 6

添加

display:inline-block;

并添加

margin-left:-87px

。其中 87px 源自

100px(整个宽度200px的50%)-13px(跨度宽度25px的50%)

span {
  border-radius: 50%;
  background-color: #d8d9dd;
  border: 6px solid #262c40;
  width: 25px;
  height: 25px;
  margin: 30px 0 0 40px;
  display: block;
}
span:before {
  content: attr(data-value);
  position: relative;
  white-space: pre;
  display: inline-block;
  top: -27px;/*
  left: -29px;*/  
  margin-left: -87px;
  width: 200px;
  text-align: center;
}

<span data-value="November 2016"></span>
<span data-value="May 2016"></span>

Answer 7

在我的例子中，我需要在pseudo的内容元素内水平居中一个html符号，所以我使用了line-height属性：

details summary::after{
    content: "›";
    border-radius: 100%;
    position: absolute;
    color: #64C1E3 ;
    right: 10px;
    top: 20px;
    width: 20px;
    height: 20px;
    display: flex;
    z-index: 1;
    border: 1px solid #64C1E3;
    transform: rotate(90deg);
    justify-content: center;
    font-size: 30px;
    line-height: 14px;
    font-family: emoji;
    transition: .5s;
}

Answer 8

.安达{

    display: flex;
    align-items: center;
    justify-content: center;

    width: 200px;
    height: 200px;
    border: 1px solid rgb(55, 26, 26);
    background-color: aqua;
    border-radius: 100%;
  }
  .anda::before {
    content:attr(data-text);
    color: #fff;
    position: absolute;
    width: 150px;
    height: 150px;
    background: rgb(55, 26, 26);
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
  }

Answer 9

这样做对我来说总是有效：

先在元素中放入一些内容 以及 CSS 中 z-index 属性的变化

示例：

您的 HTML 文件

<p>some content</p>

您的 CSS 文件

p{
  z-index:10;
}

p::after{
  content:'';
  /*rest of the code*/
}

/*use z-index as per your requirements*/