How to Add Content using :after?-CodePudding

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

I have this code:

<div  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- name="option-box-ymq-variant-Modo de Color">

I want to add some text after this using CSS. This is what I've tried:

div#option-box-ymq-variant-1.ymq-options-box ymq-options-box-15  ymq-shopify-option-box :after {
  content: "Testing";
}

--> doesn't work

Could anyone lend me a hand? Any insights appreciated.

CodePudding user response：

you select wrong

div#option-box-ymq-variant-1:after{
    content: 'test';
}

CodePudding user response：

It may be important that you make the selection as specific as possible,

For example in this case that you want to select that unique div (with its unique id) but only when it has all the three classes you show.

To link together all the classes you put them without spaces but with a .

Note that the current way of indicating an after element is to use two colons not just the one. This is to distinguish pseudo elements like after and before from pseudo classes.

Here's the code:

div#option-box-ymq-variant-1.ymq-options-box.ymq-options-box-15.ymq-shopify-option-box::after {
  content: "Testing";
}

<div  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-
  name="option-box-ymq-variant-Modo de Color">

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.