CODEWITHSUNDEEP
htmlcss
pregunta
pregunta

Reputation: 138

Brackets symbol with value on it as label

I have a build like that one here:

<ul>
    <li>
        <div>[coil]</div>
    </li>
    <li>
        <div>[coil]</div>
    </li>
    <li>
        <div>[coil]</div>
    </li>
</ul>

The coil represents a 3D-ring built with css pseudo elements :after and :before. Now I want to display the width (in mm) like a description on the left side with a bracket like symbol but I can't figure out how. I experemented with a border and padding but it won't work how I imagined.

It should be like that: enter image description here

Hopefully some of you css specialists can help me.

Upvotes: 1

Views: 507

Answers (2)

Tushar
Tushar

Reputation: 4418

Check if this helps you.

ul {
  list-style: none
}

li {
  margin: 6px 0;
}

.coil {
  margin: 0 auto;
  position: relative;
  height: 35px;
  width: 220px;
  background: #C8C8C8;
  display: block;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-bottom-left-radius: 50% .5em;
  border-bottom-right-radius: 50% .5em;
  border-top-left-radius: 50% .5em;
  border-top-right-radius: 50% .5em;
}

.coil span {
  position: absolute;
  border: 1px solid #000;
  border-right: none;
  width: 8px;
  top: 0.4em;
  bottom: 0.4em;
  left: -15px;
  font-size: 12px;
  font-family: arial;
}

.coil span:before {
  content: attr(data-value);
  position: absolute;
  top: 50%;
  line-height: 14px;
  transform: translateY(-7px);
  right: 20px;
}

.coil:before {
  background: inherit;
  position: absolute;
  content: "";
  top: 8px;
  width: inherit;
  height: 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  border-bottom-left-radius: 50% .5em;
  border-bottom-right-radius: 50% .5em;
}

.coil:after {
  background: rgba(0, 0, 0, 0.4);
  content: "";
  position: absolute;
  height: 5px;
  width: 50px;
  left: 82px;
  top: 4px;
  border-radius: 50%;
}
<ul>
  <li>
    <div class="coil"><span class="value" data-value="3mm"></span></div>
  </li>
  <li>
    <div class="coil"></div>
  </li>
  <li>
    <div class="coil"></div>
  </li>
</ul>

Upvotes: 2

Bhuwan
Bhuwan

Reputation: 16855

Use a <span> for the data which you want to show to the left side with data-attribute and use :after pseudo element to achieve the desired result

ul {
  list-style: none
}

li {
  margin: 6px 0;
}

.coil {
  margin: 0 auto;
  position: relative;
  height: 35px;
  width: 220px;
  background: #C8C8C8;
  display: block;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-bottom-left-radius: 50% .5em;
  border-bottom-right-radius: 50% .5em;
  border-top-left-radius: 50% .5em;
  border-top-right-radius: 50% .5em;
}

.coil:before {
  background: inherit;
  position: absolute;
  content: "";
  top: 8px;
  width: inherit;
  height: 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  border-bottom-left-radius: 50% .5em;
  border-bottom-right-radius: 50% .5em;
}

.coil:after {
  background: rgba(0, 0, 0, 0.4);
  content: "";
  position: absolute;
  height: 5px;
  width: 50px;
  left: 82px;
  top: 4px;
  border-radius: 50%;
}

.coil span:after {
  content: attr(data-value);
  width: 8px;
  top: 0;
  border: 1px solid black;
  position: absolute;
  border-right: 0;
  left: -16px;
  bottom: 0;
  line-height: 35px;
  text-indent: -12px;
}
<ul>
  <li>
    <div class="coil"><span data-value="2"></span></div>
  </li>
  <li>
    <div class="coil"><span data-value="4"></span></div>
  </li>
  <li>
    <div class="coil"><span data-value="1"></span></div>
  </li>
</ul>

Upvotes: 2

Related Questions