Question

我目前使用PHP生成的HTML，如下所示：

 echo '<div class="right">';
 echo '<p class = "triangle-isosceles left">'; the_sub_field("right_quote", false); echo '::after';  echo '</p>';
 echo '</div>';

目前在html中显示为：

<p>"This is the output of the_sub_field function ::after"</p>

当我希望它输出为

时

<p>"This is the output of the_sub_field function" ::after</p>

Answer 1

::after或::before是一个伪元素，允许您将内容从CSS插入到页面中（不需要在HTML)中。

虽然最终结果实际上并不在DOM中，但它在页面上显示为好像，并且基本上是这样的：

div::after {
 content: "hi";
}

所以要添加一个伪，你必须使用css，试试这个：

 echo '<div class="right">';
 echo '<p class = "triangle-isosceles left">'; the_sub_field("right_quote", 
 false); echo '</p>';.
 echo '<style>p.triangle-isosceles:after{content:"something"}</style>';
 echo '</div>';

然后结果就像：

p.triangle-isosceles:after{
   content:" -> after content";
}

<p class="triangle-isosceles">"This is the output of the_sub_field function"</p>

Answer 2

您无法在DOM中添加:after元素（当前加载的页面），您必须使用他的类将其添加到<p>元素的样式表文件中。

像这样

.triangle-isosceles:after{
  content:'';  
}

请参阅：https://www.w3schools.com/cssref/sel_after.asp

当然你可以使用php函数fopen和fwrite和fclose来添加新的css规则。

<php?
// This is your after element you put in a variable (like a storage place)
$addMyAfterElement = ".triangle-isosceles:after{ content:'';";

// This is your stylesheet file you open and you put in a variable
$myStyleSheet = fopen("styles\style.css", 'a+');

// This is writting your after element inside the stylesheet file
fwrite($myStyleSheet, $addMyAfterElement);

// And here you close your stylesheet file
fclose($myStyleSheet); 

?>

将一个:: after伪元素添加到HTML中生成的HTML

2 个答案: