user8368074 user8368074 - 2 years ago 124
CSS Question

background color on only text

The text in

h3
is dynamic and the width of it's parent is static and I want to manage it in the following way:

Output I need

.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>


Can any one help me out?

Answer Source

.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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download