Dynamically Aligning Pseudo Element According to Parent Height

Dynamically aligning pseudo element according to parent height

Here is a solution using clip-path. The idea is to use % values in the polygon to only show the needed shape and it will always work whatever the height is:

.one-line {  font-size: 2em;  width: 150px;  min-height: 50px;  height: auto;  background: blue;  margin: 5px;  position: relative;  color: #fff;}
.one-line:after {  content: '';  display: block;  position: absolute;  top: 0;  bottom: 0;  width: 25px;  right: -25px;  background: red;  -webkit-clip-path: polygon(100% 50%, 0 0, 0 100%);  clip-path: polygon(100% 50%, 0 0, 0 100%);}

<div class="one-line">text<br>text<br></div><div class="one-line">text<br>text<br>text<br></div>
<div class="one-line">text</div>
<div class="one-line">text<br>text<br>text<br>text<br>text<br>text<br>text<br></div>

Css arrows on pseudo element - fit height dynamically to parent

I found an interesting solution here which seems to be able to handle dynamic height - it's using linear gradient backgrounds:

/* CSS: */
.box {  width: 400px;  background-color: #307084;  color: #fff;  margin-bottom: 20px;  padding: 10px;  position: relative;}
.box:before,.box:after {  width: 20px;  height: 50%;  position: absolute;  left: 100%;  content: "";}
.box:before {  top: 0px;  background: -webkit-linear-gradient(left bottom, #307084 50%, rgba(0, 0, 0, 0) 50%);  background: linear-gradient(to right top, #307084 50%, rgba(0, 0, 0, 0) 50%);}
.box:after {  top: 50%;  background: -webkit-linear-gradient(left top, #307084 50%, rgba(0, 0, 0, 0) 50%);  background: linear-gradient(to right bottom, #307084 50%, rgba(0, 0, 0, 0) 50%);}

<!-- HTML: -->
<div class="box" style="font-size: 20px">  css triangle/arrow grow when its parent div is resized</div>
<div class="box" style="font-size: 25px;">  css triangle/arrow grow when its parent div is resized</div>
<div class="box" style="font-size: 40px;">  css triangle/arrow grow when its parent div is resized</div>

How do I position a div relative to the parent div which contains dynamic text?

A nice approach would be to use data- attributes on your html, then display them via a pseudo-element content property.

/*just for the SO snippet positioning*/.bopis-messaging {  margin: 140px;}
/* stablishes that any anchor tag with a data-tooltip attibute/* will be relative positioned, so the pseudo-element will be/* absolute positioned accordingly*/a[data-tooltip] {  position: relative;}
/* displays a tooltip as an absolute positioned pseudo-element, /* which contents are in the data-tooltip html attribute/* starts as zero-scaled for a fancy display on hover*/a[data-tooltip]::after {  content: attr(data-tooltip);  display: block;  position: absolute;  width: 180px;  border: 1px solid #333;  background: #ffffff;  color: #333333;      font-family: Lato;   font-size: 12px;     line-height: 20px;  padding: 16px;  bottom: 100%;  right: 0;  transform-origin:bottom;  transform: translate(50%, 0) scale(0);  transition: transform 200ms ease-out;}
/*reveals the tooltip on hover*/a[data-tooltip]:hover::after {  transform: translate(50%, 0) scale(1);}

<div class="bopis-messaging">   <a href="" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do e iusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud">Ready within 7 Days *</a>   <br>   <a href="" data-tooltip="shorter lorem ipsum is shorter">longer text is longer is longer is longer *</a>   <br>   <a href="" data-tooltip="shorter lorem ipsum is shorter">short text *</a>   </div>

Use a dynamically expanding div as clipping mask for background image in parent

Use a pseudo element that you make relative to the background element

.background {
  background: yellow;
  text-align: center;
  position: relative;
  z-index: 0;
}

.text {
  display: inline-block;
  color: #fff;
  margin: 20px;
  padding: 20px;
  clip-path: inset(0); /* clip to only text element */
}

.text:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url(https://picsum.photos/id/1056/800/600) center/cover;
}

/* to illustrate */
.text:hover {
  clip-path: none;
}

<div class="background">
  <div class="text">
    My text is in here
  </div>
</div>

How to set the margin or padding as percentage of height of parent container?

The fix is that yes, vertical padding and margin are relative to width, but top and bottom aren't.

So just place a div inside another, and in the inner div, use something like top:50% (remember position matters if it still doesn't work)

Dynamically Aligning Pseudo Element According to Parent Height