JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div class="container">
<div class="some" style="--right-offset: 2rem">
  <a href="#">Some link here</a>
</div>

<div class="some" style="--right-offset: 7rem"><a href="#">Some link here</a></div>

<div class="some" style="--right-offset: 0">
  <a href="#">Some link here</a>
</div>

<div class="some" style="--right-offset: 50%"><a href="#">Some link here</a></div>
</div>

CSS

* {
  font-family: sans-serif;
}
:root {
  --right-offset: 0;
  --border-color: #bbb;
}
.container {
  border: 1px solid var(--border-color);
  border-bottom-width: 0;
  width: 10rem;
}
.some {
  border-bottom: 1px solid var(--border-color);
  padding: 1rem;

  position: relative;
  display: flex;
  align-items: center;
}
.some::before {
  content: "";
  position: absolute;
  top: 0;
  right: var(--right-offset);
  bottom: 0;
  left: 0;
  background: #eee;
  z-index: -1;
}

.mb-1 {
  margin-bottom: 1rem;
}