0

I need to select any headings with inline style 'text-align: center' in my CSS so that I can apply an ::after styling to them. Is there any way to do this? It is for a WordPress CMS so I specifically need to be able to style anything that can be used in the WYSIWYG editor by the client.

My stylesheet is as follows for any headings with class .textcenter:

.textcenter h1::after { 
content: ''; 
display: block; 
margin: 5px auto 0; 
width: 150px; 
height: 2px; 
background: rgb(18,113,183);
background: linear-gradient(90deg, rgba(18,113,183,1) 0%, rgba(18,113,183,1) 50%, rgba(152,195,59,1) 50%, rgba(152,195,59,1) 100%); }

I need the same to apply for anything that is created by the client such as:

<h1 style="text-align: center;">....</h1>

Is there anyway to do that?

TIA

Rachel Glover
  • 23
  • 5
  • 1
    Check this https://stackoverflow.com/questions/14139690/css-selector-for-element-within-element-with-inline-style – Mahesh May 25 '22 at 10:57
  • 1
    In short, NO https://stackoverflow.com/questions/14141374/using-css-before-and-after-pseudo-elements-with-inline-css – JmRag May 25 '22 at 10:59

1 Answers1

1

Try attribute selectors. Maybe this will work.

.textcenter h1[style*="text-align: center"]::after { 
content: ''; 
display: block; 
margin: 5px auto 0; 
width: 150px; 
height: 2px; 
background: rgb(18,113,183);
background: linear-gradient(90deg, rgba(18,113,183,1) 0%, rgba(18,113,183,1) 50%, rgba(152,195,59,1) 50%, rgba(152,195,59,1) 100%); }

Ref: CSS selector by inline style attribute

Megrax
  • 103
  • 6