使用 :后选择性进行内联样式设置

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

你不能添加pseudo运算符inline Style，因为Pseudo运算符只能在CSS classes和Ids

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

Answer 2

在

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

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>