将伪元素居中 [英] centering a pseudo element

问题描述

我想在原始 div 上设置一个 div 的伪元素.

问题是div的文字居中.

这是一个例子:

#a:after{内容:文字"；位置:绝对；左:0;红色;}

<div style="width:100%;text-align:center;"><p id="a">文本</p>

为什么伪元素不受div样式的影响?

解决方案

#a:after {内容:文本"；位置:绝对；左:50%；变换:translateX(-50%);红色;}

<div style="width:100%;text-align:center;"><p id="a">文本</p>

这里是居中方法的解释:元素不会保持居中，尤其是在重新调整屏幕大小时

I want to set a pseudo element of a div on the original div.

The problem is that the text of the div is centered.

Here is an example:

#a:after{
  content:"Text";
  position:absolute;
  left:0;
  color:red;
}

<div style="width:100%;text-align:center;">
  <p id="a">Text</p>
</div>

Why is the pseudo element not affected by the div style?

解决方案

#a:after {
  content: "Text";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: red;
}

<div style="width:100%;text-align:center;">
  <p id="a">Text</p>
</div>

Here's an explanation of the centering method: Element will not stay centered, especially when re-sizing screen

这篇关于将伪元素居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！