如何设置边框底部等长的包装文字

时间:2019-05-18 16:36:04

标签: html css3

1 个答案:

答案 0 :(得分:0)

我不太了解你的问题。无论如何,我只是按照您所附加的内容进行设计。这是link。希望这就是您要寻找的。

html

<div>
    <div class="inner-content">
        <h2>cda ramadan campaign</h2>
        <p>culturally releavant communication</p><a href="">view work<i class="fas fa-long-arrow-alt-right"></i></a>
    </div>
</div>

CSS

div {
  background: #FF5656;
  padding: 20px;
  max-width: 300px;
}
div h2 {
  margin: 0;
  text-transform: uppercase;
  color: white;
  padding-bottom: 10px;
  border-bottom: 1px solid #fff;
}
div p {
  color: white;
  text-transform: capitalize;
}
div a {
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 12px;
}
div a i {
  margin-left: 5px;
}

输出

enter image description here