Inserting an element using css

HTML & CSS
1

Hi everyone,

I’m using a content management system and I’m finding that when I use the editor to insert a numbered list that it’s inserting a span around the contents of the list elements, eg.

<li><span style="line-height: 1.6; font-family: inherit;">This is the text inside the list element</span></li>

I was told that this was being set in the external css file but I’m trying to work out how it could be set. I mean is it possible to use css to insert a span with inline css inside a list element? If yes, can you let me know what the code would look like so I can search the file?

Thanks for any advice.

3

Inline CSS (and inline JavaScript too) is not a good thing. I’d ask yourself two questions.

How much of a problem is this causing you?
Is it bad enough to justify looking for a better CMS?

This kind of code is typical of WYSIWYG editors. Does the CMS have a “code” editor you can use instead?

4

It can be done using the content property, look for that.

5

If I understand right, it’s not the webpage / firebug that he’s seeing that span. It’s his editor for his CMS. I would think that the CSS would not plug that in until live.

Assuming htis is true, you probably just have your CMS to blame.

Assuming it’s not true, do CTRL+F “:before” in your CSS files. Find any CSS rules with :before pseudo class, and that uses the content property.

6

A CMS that shows you something like this while editing

<li><span style="line-height: 1.6; font-family: inherit;">This is the text inside the list element</span></li>

is no CMS. Anyway, :before could very well be :after, CTRL-F-ing for content is a safer bet for me.

7

If :after was a possibility, the span would not be right after the <li> was created. It would be after all content in the <li>.

8

When there’s only one element, as it is the case here, what’s the difference between :before and :after?

9

I just explained the difference.

The span could ONLY be created using :before . It places the pseudo element before any content.

Using :after places that pseudo element (we are saying it’s the span) after all content in the <li>.

<li><span>before pseudo</span>REGULAR CONTENT HERE</li>
<li>REGULAR CONTENT HERE<span>after pseudo</span></li>
10

Except there’s only one element in li, created by the rule. You’re missing something here :wink:

11

Ah. Yes I only glanced at the beginning of the <li>. Apologies. That’s very unusual for it to be set up that way. I assumed there would be some actual content.

12

You mean

:after { 
    content: "apologies"
}

right? :smile:

1 Like
13

It’s a matter of principle now. So no, I mean

:before { 
    content: "apologies"
}

:smiley:

14

Thanks for the replies. I searched for both :before and :after but couldn’t find any clues. I don’t know if I’m ever going to find the answer as to why the CMS is inserting the span but I basically just want to find out why the numbered list is rendering in a different font. Would you be able to take a look at the page and see what’s happening with the css:

http://coogeenaturalhealthcentre.businesscatalyst.com/blog/The-Benefits-of-Lemon-and-Honey

The numbered list seems to be in a different font and seems to have a different font weight and colour but I can’t work it out. I just need it to be like the first paragraph.

I’d really appreciate any help.

15

It has the same look in Google Chrome (Versión 37.0.2062.94 m under Windows 7)

This is what your ordered list is using

It doesn’t look like your P has any specfic type associated though

16

Thanks for the reply,

This is what it looks like on my computer in Google Chrome:

836×324 71.7 KB

See how the list looks like it’s a different font and a lighter weight?

Do you know what could be causing that?

17

I forgot to mention that I’m viewing it on a Mac but it still shouldn’t appear inconsistent …

18

Funny… This is how it looks in MY Google Chrome

1583×974 260 KB

I have to say, though, that at home it may look different. I’ll have a look when I get there in a few hours :slight_smile:

19

Mine is like Molona.

Perhaps it’s the text rendering property? Don’t see anything else TBH.

20

Do you mean the how the CMS is adding the span around the list elements?

21

Are all the pages rendering in italics for you?