仅文本的背景颜色

Question

h3中的文字是动态的，其父级的宽度是静态的，我想通过以下方式管理它：

.sh-link{
    width:100%;
    max-width: 200px;
   }

.sh-link h3{
    text-align: right;
    background: orange;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    display: inline;
}

    <div class="container">            
      <div class="sh-link">
        <h3>See details on dealer website</h3>
      </div>
    </div>

任何人都可以帮助我吗？

Answer 1

.container {
  width: 300px;
  display: flex;
}

.left p,
.right p {
  width: 100%;
  background: orange;
  color: white;
  display: inline;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.separator {
  background: white;
  width: 20px;
}

<div class="container">
  <div class="left"><p>See details on dealer website</p></div>
  <div class="separator"></div>
  <div class="right"><p>See details on dealer website</p></div>
</div>

Answer 2

您应该使用:after伪来存档此

＆＃13;

＆＃13;

h1 {
  float: left;
  width: 300px;
  font-size: 0;
}

h1:after {
  content: attr(data-text);
  font-size: 30px;
  line-height: 30px;
  background-color: orange;
  color: white;
}

＆＃13;

<h1 data-text="See details on dealer website">See details on dealer website</h1>

＆＃13;

＆＃13;

＆＃13;

如果您想对齐正确的文字，只需要将text-align: right添加到h1选择器。