Can I specify css ::before selector style in Rails view?

Question

In my css I have this:

.inner-class {
  content: '';
}

.inner-class:before {
  background: url(http://www.fillmurray.com/500/500.jpg);
  content: '';
}

And in my view's html.erb, I have this:

<div class="outer-class">
  <div class="inner-class">
    ::before
  </div>
</div>

I want to change the ::before selector's properties using Rails. Normally, I would do something like this:

<div class="outer-class">
  <div class="inner-class" style:"background: url(<% image_path %>)">
    ::before
  </div>
</div>

However, that won't change the properties of inner-class:before. How do I do this?

you can't do it inline. Could append a style tag to head though — charlietfl
– charlietfl, Commented Aug 6, 2015 at 22:25

Josh Burgess · Accepted Answer · 2015-08-07 14:47:00Z

1

What you should do is add an additional CSS class, and change the ::before pseudo there, then apply that class conditionally to the parent element.

Remove the ::before text from your ERB.
Add a CSS class like so:

 .inner-class.do-something:before {
   background: url(http://www.fillmurray.com/300/300.jpg);
   content: '';

Add in a conditional to your ERB like so:

 <div class="outer-class">
   <div class="inner-class" class="<% 'do-something' if my_condition %>">

   </div>
 </div>

Edit

Based on your comment, you're looking for something more like this. Fair warning this is probably the worst way to display an image dynamically in Rails I can imagine, and at this point I'd recommend you just have a separate element for your avatar image.

<div class='inner-class' data-image="<% ActiveSupport::Base64.encode64(open(article.user.avatar_url) { |io| io.read }) %>"></div>

Your CSS would be

 .inner-class:before { 
   content: url(attr(data-image)); 
   height: 40px; 
   width: 40px;  /* Whatever the expected height and width of the image are */`
 }

edited Aug 7, 2015 at 14:47

answered Aug 6, 2015 at 21:56

Josh Burgess

9,6071 gold badge35 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

alphaleonis Over a year ago

I'm not sure if that helps me in this particular situation. I want to generate the image dynamically in the view, rather than set it in the css. So, something like <% article.user.avatar_url %> would be set as the background image in the ::before element.

alphaleonis Over a year ago

I think I've decided to pursue another way of displaying the images after reading your comments, but I thought I'd try your method to see if I could get it to work. Trying it this way gives me an `uninitialized constant ActiveSupport::Base64" error.

Josh Burgess Over a year ago

Did you require 'base64'?

Josh Burgess Over a year ago

At the top of whatever file you're using the ActiveSupport::Base64.

alphaleonis Over a year ago

If that would be `article.rb' in this instance, then yes. Sorry, I'm not very familiar with how that works.

Collectives™ on Stack Overflow

Can I specify css ::before selector style in Rails view?

1 Answer 1

Edit

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Edit

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related