Refactoring special HTML characters

Question

<li class="retro-font">Newsletters&nbsp;&loz;&nbsp;</li>

I have the above code designed to create a space and a diamond after each section. It's a retro look style choice. I'd like to not have to repeat  &loz;  after each and every element. Is there a way to extract that into a method or a class or something?

score 0 · Accepted Answer · answered Dec 05 '19 at 18:25

0

Sure, you can add a pseudo element after each .retro-font element, containing the diamond ASCII code.

.retro-font:after {
  content: "\25ca";
  display: inline-block;
  margin-left: 4px;
}

<ul>
  <li class="retro-font">Newsletters</li>
  <li class="retro-font">Oldletters</li>
</ul>

Placing Unicode character in CSS content value

answered Dec 05 '19 at 18:25

dw_

1,707
1
7
13

1

You are the real MVP. This is exactly the functionality I wanted! – Bryant Richards Dec 06 '19 at 07:41

score 0 · Answer 2 · answered Dec 05 '19 at 19:58

The CSS answer that @dw_ gives is a good one. But if, for whatever reason, you prefer to create the effect with Rails rather than CSS, you could use a helper. In a helper module:

def diamond_li(string)
  '<li class="retro-font">' + string + '&nbsp;&loz;&nbsp;</li>'
end

In you view:

<%= diamond_li("Newsletters") %>

Refactoring special HTML characters

2 Answers2