CSS Arrow Shape After Content

Question

I have some problem in creating arrow styles through css after content. Please find the code below. Requirement is to add the arrow at the end of the text A++. For example please click on this url and see what i needed to achieve. https://images.clasohlson.com/web/images/energy/apphighest.png. Could you please suggest how to achieve this? do we need to add any :before and :after on product-marker level to achive this requirement?

.product-markers {
  position: static;
  display: block;
  overflow: hidden;
  bottom: 80px;
  right: -1px;
  width: auto;
  height: auto;
  opacity: 1;
  transition: opacity 0.2s linear 0s;
}

.product-markers .product-marker {
  position: static;
  max-width: 100%;
  float: left;
  text-align: left;
  line-height: 10px;
  margin-bottom: 3px;
  padding: 0;
  border: none;
  left: 10px;
  bottom: 10px;
  height: auto;
  margin: 0;
  font-family: "HM Ampersand Bold", Arial, sans-serif;
  letter-spacing: 0px;
  -webkit-font-smoothing: antialiased;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
  color: #fff;
  text-transform: uppercase;
}

.product-markers .product-marker.energy {
  --border-right: 20px solid #19945f;
  font-size: 11px;
}

.product-markers .product-marker.energy .wrapper {
  background: #19945f;
}

.product-markers .product-marker .wrapper {
  padding: 4px 0 5px;
  position: relative;
  left: 1px;
}

.product-markers .product-marker.energy .wrapper .inner {
  position: static;
  display: block;
  overflow: hidden;
  padding: 10px;
  background: #19945f;
}

.product-markers .product-marker .wrapper .inner {
  position: relative;
  left: 9px;
}

<div class="product-markers">
  <div class="product-marker energy">
    <span class="wrapper">
      <span class="inner">A++</span>
    </span>
  </div>
</div>

https://stackoverflow.com/questions/7073484/how-do-css-triangles-work — Jesse, Jan 23 '18 at 10:08
I seen css-tricks but could not get what i wanted. could you please see this url what i need actually https://images.clasohlson.com/web/images/energy/apphighest.png. — user2057006, Jan 23 '18 at 10:09

score 0 · Accepted Answer · answered Jan 23 '18 at 10:56

Here is an example how to use the CSS triangle (Jesse de Bruijne's idea)

.product-markers {
  position: static;
  display: block;
  overflow: hidden;
  bottom: 80px;
  right: -1px;
  width: auto;
  height: auto;
  opacity: 1;
  transition: opacity 0.2s linear 0s;
}

.product-markers .product-marker {
  position: static;
  max-width: 100%;
  float: left;
  text-align: left;
  line-height: 10px;
  margin-bottom: 3px;
  padding: 0;
  border: none;
  left: 10px;
  bottom: 10px;
  height: auto;
  margin: 0;
  font-family: "HM Ampersand Bold", Arial, sans-serif;
  letter-spacing: 0px;
  -webkit-font-smoothing: antialiased;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
  color: #fff;
  text-transform: uppercase;
}

.product-markers .product-marker.energy {
  --border-right: 20px solid #19945f;
  font-size: 11px;
}

.product-markers .product-marker.energy .wrapper {
  background: #19945f;
}

.product-markers .product-marker .wrapper {
  padding: 4px 0 5px;
  position: relative;
  left: 1px;
}

.product-markers .product-marker.energy .wrapper .inner {
  position: static;
  display: inline-block;
  overflow: hidden;
  padding: 10px;
  background: #19945f;
  float:left;
}

.product-markers .product-marker .wrapper .inner {
  position: relative;
  left: 9px;
}

.product-markers .product-marker .wrapper .arrow {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-bottom: 15px solid transparent;
  border-top: 15px solid transparent;
  border-left: 15px solid #19945f;
  float: left;
}

<div class="product-markers">
  <div class="product-marker energy">
    <span class="wrapper">
      <span class="inner">A++</span>
      <span class="arrow"></span>
    </span>
  </div>
</div>

.product-markers .product-marker.energy:after { content: ""; display: inline-block; width: 0; height: 0; border-bottom: 15px solid transparent; border-top: 15px solid transparent; border-left: 15px solid #19945f; float: left; } — user2057006, Jan 23 '18 at 11:17
I changed little from your answer to support in my environment. Thank you so much. I will accept your response as answer — user2057006, Jan 23 '18 at 11:18

CSS Arrow Shape After Content

1 Answers1