如何为p标签的after伪类添加样式并为指定HTML结构中的首个p标签设置display: inline;样式

没问题，这两个需求都可以通过CSS快速实现，我给你分步说明：

1. 为首个<p>标签设置display: inline #

我们可以用CSS的:first-of-type选择器精准定位.showques容器里的第一个<p>元素——不管它前面有其他元素（比如你的<div class="lab_tre">或者空格文本节点），都能准确选中目标元素，代码如下：

.showques p:first-of-type {
  display: inline;
}

设置后，第一个<p> Text1 </p>就会和前面的"A"以及空格在同一行显示，完全匹配你的需求。

2. 为<p>标签的::after伪类添加样式 #

::after伪类可以在每个<p>元素的末尾插入自定义内容并设置样式，你可以根据实际需求调整内容和样式属性，示例代码如下：

/* 给所有p标签的after伪类添加样式，可按需修改 */
.showques p::after {
  content: " ✅"; /* 自定义插入的内容，空内容可以写content: "" */
  color: #2ecc71; /* 示例文本颜色 */
  margin-left: 6px; /* 和原文本的间距 */
  font-weight: bold;
}

如果只需要给首个p标签的::after加样式，只需要把选择器改成 .showques p:first-of-type::after 即可。

完整代码示例 #

把CSS和HTML结合起来，完整的可运行代码如下：

<div class="showques"> 
  <div class="lab_tre">A</div> 
  &nbsp; 
  <p> Text1 </p> 
  <p>Text 2 para </p> 
</div>

<style>
.showques p:first-of-type {
  display: inline;
}

.showques p::after {
  content: " ✅";
  color: #2ecc71;
  margin-left: 6px;
  font-weight: bold;
}
</style>

内容的提问来源于stack exchange，提问作者Gajendran