html - 如何设置边框底部等于换行文本的长度

Question

在这里，我附上了我的作品。我想要那个边框完整包装内容长度宽度

标签： htmlcss

Answer 1

我没有很好地理解你的问题。无论如何，我只是做了你所附的设计。这是链接。我希望这就是你要找的。

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;
}

输出