How to change arrow position in css?

Issue

.content > .line > div {
  --line-width: 2px;
  --x-offset: 8px;
  --x-width: 120px;

  position: relative;
  padding-bottom: var(--line-width);
}
.content > .line > div:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: var(--x-offset);
  width: var(--x-width);
  height: 100%;
  border-left: var(--line-width) dashed currentColor;
  border-bottom: var(--line-width) dashed currentColor;
}
.content > .line > div:after {
  content: "";
  display: block;
  position: absolute;
  bottom: calc(-1 * var(--line-width) * 1.75);
  left: calc(var(--x-offset) + var(--x-width));
  width: 0;
  height: 0;
  border: calc(var(--line-width) * 2.5) solid transparent;
  border-right: 0;
  border-left: calc(var(--line-width) * 5) solid currentColor;
}

<div class="content">
  <div class="line">
    <div>hh</div>
  </div>
</div>

How to change dotted arrow position in Css like above.

I tried changing the css code, But it is coming like bottom. Using the below css code, How to modify it and get the proper shape of the arrow.

Solution

Some css adjustments will give you this.

.content>.line>div {
  --line-width: 2px;
  --x-offset: 8px;
  --x-width: 120px;

  position: relative;
  padding-bottom: var(--line-width);
}

.content>.line>div:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: var(--x-offset);
  width: var(--x-width);
  height: 100%;
  border-right: var(--line-width) dashed currentColor;
  border-bottom: var(--line-width) dashed currentColor;
}

.content>.line>div:after {
  content: "";
  display: block;
  position: absolute;
  top: calc(-1 * var(--line-width) * 1.75);
  left: calc(var(--x-offset) / 2 + var(--x-width));
  width: 0;
  height: 0;
  border: calc(var(--line-width) * 2.5) solid transparent;
  border-top: 0;
  border-bottom: calc(var(--line-width) * 5) solid currentColor;
}

<div class="content">
  <div class="line">
    <div>Sample Text</div>
  </div>
</div>

Answered By - Nitheesh