Question

我下面有这样的样式表，

h3 {
  position: relative;
  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
  color: #454545;
}

h3:after {
  position: absolute;
  content: '';
  left: -7px;
  top: -7px;
  border-width: 0 0 15px 15px;
  border-style: solid;
  border-color: #fff #fff #a8d4ff;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

<h3>Title</h3>

但是在我的网络规则中，我不能使用标签

所以我必须使用

<h3 style ="position: relative;background: #dfefff;~~">

如何以这种风格使用h3:after？

Answer 1

无法在内联CSS中使用pseudo。如果要使用pseudo，则必须使用internal CSS或External CSS。

Answer 2

您无法添加pseudo运算符inline Style，因为Pseudo运算符仅在CSS classes和Ids中可用

您将要添加带有pseudo属性的style运算符，这是不可能的，
有关更多信息，请访问本文 。这会帮助你 https://www.w3.org/TR/css-style-attr/

Answer 3

您可以使用伪元素以不同的方式重新创建它们。

^{只有小阴影消失了}

<h3 style="background:
    linear-gradient(to bottom right,#fff 49%,#a8d4ff 50%) 0 0/15px 15px border-box,
    repeating-linear-gradient(to right, #fff 0 4px,transparent 4px 8px) top/100% 2px,
    repeating-linear-gradient(to right, #fff 0 4px,transparent 4px 8px) bottom/100% 2px,
    repeating-linear-gradient(to bottom,#fff 0 4px,transparent 4px 8px) left/2px 100%,
    repeating-linear-gradient(to bottom,#fff 0 4px,transparent 4px 8px) right/2px 100%,
    #dfefff;
  background-repeat:no-repeat;
  border:5px solid transparent;
  padding: 0.2em 0.5em;
  color: #454545;">Title</h3>

选择性使用后：用于内联样式设置

3 个答案: