css for html attribute

2 Views

In my site I have this code (WordPress / Woocommerce Cart page): 

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

I want to add an update icon after the text “Update Cart” On other pages was it fairly simple using a :after pseudo element.

Read More

I don’t know what I’m missing but I can’t get it to work with the mark-up above.
For instance I have tried 

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

and 

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

This did not work.
Please advice.

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. There is the following note in CSS 2.1: “Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.” This has not happened so far, and browsers simply don’t implement those pseudo-elements at all for elements like input. But they do implement them for button.

    So if you can change the markup, you can append generated content to the button text:

    <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>

    The example includes an input type=button element too, to illustrate how the button rendering is the same, except that for button, generated content works.

  2. You can’t use :after or :before on input or button element.

    You can use a span element with a button inside and an :after in the span with icon (probably with a character as content using Font Awsome or Icon Moon).

    Don’t forget the content inside :after css, the pseudo element will not be visible if this css property isn’t properly set.