Question 11761 in Shopify Question posted in
The Shopify help center can be found here.

How to Add Content using :after? – Shopify

I want to add some text after this using CSS:

div#option-box-ymq-variant-1.ymq-options-box ymq-options-box-15 ymq-shopify-option-box :after {
  content: "Testing";
}
<div class="ymq-options-box ymq-options-box-15  ymq-shopify-option-box " id="option-box-ymq-variant-1" data-type="15" data-id="-ymq-variant-1" data-ymq-add-to-cart="1" data-name="ymq-option2" data-label="Modo de Color" data-onetime="0" data-class="ymq-attrib-ymq-variant-1"
  name="option-box-ymq-variant-Modo de Color">Div</div>

Sorry if this is a basic question, I’m new to coding.

Tags:

2

Answers


  1. 0

    you select wrong

    div#option-box-ymq-variant-1:after{
    content: 'test';
}
    Login or Signup to reply.
  2. 0

    To match multiple classes you need to use . instead of (space):

    div#option-box-ymq-variant-1.ymq-options-box.ymq-options-box-15.ymq-shopify-option-box::after {
  content: "Testing";
}
    <div class="ymq-options-box ymq-options-box-15  ymq-shopify-option-box " id="option-box-ymq-variant-1" data-type="15" data-id="-ymq-variant-1" data-ymq-add-to-cart="1" data-name="ymq-option2" data-label="Modo de Color" data-onetime="0" data-class="ymq-attrib-ymq-variant-1"
  name="option-box-ymq-variant-Modo de Color">

    Your previous selector:

    div#option-box-ymq-variant-1.ymq-options-box ymq-options-box-15 ymq-shopify-option-box :after

    Was selecting the after pseudo element of nothing that was a child of an element of type ymq-shopify-option-box (which doesn’t exist) etc. as a space in a selector is a descendant combinator

    Note: Use two colons for pseudo elements
    This is the current way of differentiating a pseudo element (like before and after) from a pseudo class.

    Note: Pseudo element text is for styling and not content
    Adding a bit of text or styling in pseudo elements can be very useful, but be aware that the text is not part of the DOM and may get missed for example by screen readers so don’t totally rely on them to convey vital information on their own, they are more of a useful embellishment.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search