我可以在 Rails 视图中指定 css ::before 选择器样式吗？

Question

在我的 css 我有这个：

.inner-class {
  content: '';
}

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

在我看来，html.erb，我有这个：

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

我想使用 Rails 更改 ::before 选择器的属性。通常，我会这样做：

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

但是，这不会改变 inner-class:before 的属性。我该怎么做？

Answer 1

你应该做的是添加一个额外的 CSS 类，并在那里更改 ::before 伪，然后有条件地将该类应用到父元素。

1. 从您的 ERB 中删除 ::before 文本。
2. 像这样添加一个 CSS 类：

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

1. 像这样在 ERB 中添加条件：

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

   </div>
 </div>

编辑

根据您的评论，您正在寻找类似的东西。 公平警告这可能是我能想象到的在 Rails 中动态显示图像的最糟糕的方式，此时我建议您只为头像图像设置一个单独的元素。

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

你的 CSS 应该是

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