css 用于 html 属性

Question

在我的网站上有这段代码（Wordpress/Woocommerce 购物车页面）：

<input type="submit" class="button" name="update_cart" value="Update Cart">

我想在文本后添加一个更新图标 "Update Cart" 在其他页面上使用 :after 伪元素相当简单。

我不知道我错过了什么，但我无法让它与上面的标记一起使用。例如我试过

input[name="update_cart"]::after {
    etc.
 }

和

.button[name="update_cart"]::after {
    etc.
 }

这没有用。请指教

Answer 1

您不能在输入或按钮元素上使用 :after 或 :before。

您可以使用内部带有按钮的跨度元素和带有图标的跨度中的 :after（可能使用 Font Awsome 或 图标月亮).

不要忘记:aftercss里面的内容，如果这个css属性设置不当，伪元素将不可见

Answer 2

CSS 2.1中有如下注释：“注意。本规范没有完全定义 :before 和 :after 与替换元素（例如 HTML 中的 IMG）的交互。这将在未来的规范中进行更详细的定义。”到目前为止，这还没有发生，浏览器根本不会为 input 这样的元素实现这些伪元素。但他们确实为 button.

实施了它们

因此，如果您可以更改标记，则可以将生成的内容附加到按钮文本中：

<style>
.button[name="update_cart"]:after {
    content: " ⤾";
 }
</style>
<input type="submit" class="button" name="update_cart" value="Update Cart">
<p>
<button type="submit" class="button" name="update_cart" value="Update Cart">Update Cart</button>

该示例也包含一个 input type=button 元素，以说明按钮呈现是如何相同的，除了 button，生成的内容有效。

css 用于 html 属性

css for html attribute

html

css

wordpress