创建标题

Question

我正在尝试将PSD转换为HTML / CSS模板 我想将该背景放在文本右侧，但我失败了。

这是我现在的代码：

<div class="col-md-3">
  <div class="block-main">
    <div class="block-title">
      <h4>SUBSCRIBE NOW</h4>
    </div>
  </div>
</div>  

Answer 1

使用伪元素和flexbox

＆＃13;

＆＃13;

h4 {
  display: flex;
}

h4::after {
  content: '';
  background: repeating-linear-gradient(
  -45deg,
  gray,
  gray 6px,
  black 6px,
  black 12px
    );
  flex:1;
  margin-left: 1em; /* for spacing only */
}

＆＃13;

<h4>SUBSCRIBE NOW</h4>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需使用img代码并将h4的CSS设置为display:inline;，就像这样：

＆＃13;

＆＃13;

h4 {
  display: inline;
}
img {
  height: 15px;
}

＆＃13;

<div>
  <h4>Text here</h4>
  <img src="http://i.stack.imgur.com/RXQgo.png">
</div>

＆＃13;

＆＃13;

＆＃13;