Guide to positioning an element directly following the initial line of a title

Question

Guide to positioning an element directly following the initial line of a title

I am attempting to position an HTML element beside the first line of a heading. To clarify, I have taken screenshots to illustrate the current appearance and desired outcome.

Current Appearance:

Desired Outcome:

In order to change the background of the title's first line to red, I utilized the ::first-line pseudo-selector.

So far, my attempts to add a text content in the ::after of the ::first-line have been unsuccessful due to limitations on adding html content to both ::before and ::after.

It is important to note that the "sunshines" are not images, but actual html elements:


<div className={css.container}>
   <div className={css.shine1}></div>
   <div className={css.shine2}></div>
   <div className={css.shine3}></div>
</div>

.container {
  position: absolute;
  display: inline;
  top: 20px;
  right: 5px;

  div {
    position: absolute;
    height: 5px;
    border-radius: 5px;
    background-color: $mainColor;
    transform-origin: bottom left;
  }
  .shine1 {
    width: 26px;
    transform: rotate(-95deg) translate(20px, 5px);
  }
  .shine2 {
    width: 32px;
    transform: rotate(-45deg) translate(20px);
  }
  .shine3 {
    width: 26px;
    transform: rotate(0deg) translate(15px);
  }
}

This code snippet is written in JSX with scss modules, but follows a similar syntax as HTML and CSS.

If you have any suggestions on how to achieve this, please share your ideas. It seems feasible considering CSS can determine the end of a line for background changes.

javascript html css

Answer 1

Answer №1

After some experimentation, I've come up with a solution.

While my approach may be considered unconventional, it has proven effective in all test cases I've considered.

To achieve this, I create a hidden duplicate of the first line that mirrors the title's properties. By determining the width of this duplicate, I can appropriately define the left property for my elements.

Here is the function I utilize to extract the first line of text:

const getFirstLine = el => {
  const text = el.innerHTML;

  // Manipulate innerHTML temporarily
  el.innerHTML = 'a';
  const singleLineHeight = el.offsetHeight;

  const arr = text.split(' ');

  let cur = '';
  let prev = '';

  for (let i = 0; i < arr.length; i++) {
    const restOfText = text.substring(prev.length, text.length);    
    const nextIndex =
      restOfText.indexOf(' ') === 0
        ? restOfText.substring(1, restOfText.length).indexOf(' ') + 1
        : restOfText.indexOf(' ');
        
    cur += restOfText.substring(0, nextIndex);
    el.innerHTML = cur;
    
    if (el.offsetHeight > singleLineHeight) {
      el.innerHTML = prev;      
      const firstLine = el.innerText;
      const indexOfSecondLine = prev.lastIndexOf('<');
      
      el.innerHTML = text;
      
      return firstLine;
    }
    
    prev += cur.substring(prev.length, cur.length);
  }
  
  el.innerHTML = text;
  return text;
};

If you decide to implement this method, ensure that you wait for the webpage fonts to load properly to obtain accurate width measurements.

document.fonts.ready.then(function () {})

To accommodate titles with the text-align: center; property, I incorporate a margin-left/right: auto; adjustment on the duplicate element which is factored into the calculated left value using:

parseInt(window.getComputedStyle(invisibleTitle).marginLeft)

While this workaround may not be ideal, it remains the most viable option given the lack of straightforward CSS solutions.

Answer 2

After some experimentation, I've come up with a solution.

While my approach may be considered unconventional, it has proven effective in all test cases I've considered.

To achieve this, I create a hidden duplicate of the first line that mirrors the title's properties. By determining the width of this duplicate, I can appropriately define the left property for my elements.

Here is the function I utilize to extract the first line of text:

const getFirstLine = el => {
  const text = el.innerHTML;

  // Manipulate innerHTML temporarily
  el.innerHTML = 'a';
  const singleLineHeight = el.offsetHeight;

  const arr = text.split(' ');

  let cur = '';
  let prev = '';

  for (let i = 0; i < arr.length; i++) {
    const restOfText = text.substring(prev.length, text.length);    
    const nextIndex =
      restOfText.indexOf(' ') === 0
        ? restOfText.substring(1, restOfText.length).indexOf(' ') + 1
        : restOfText.indexOf(' ');
        
    cur += restOfText.substring(0, nextIndex);
    el.innerHTML = cur;
    
    if (el.offsetHeight > singleLineHeight) {
      el.innerHTML = prev;      
      const firstLine = el.innerText;
      const indexOfSecondLine = prev.lastIndexOf('<');
      
      el.innerHTML = text;
      
      return firstLine;
    }
    
    prev += cur.substring(prev.length, cur.length);
  }
  
  el.innerHTML = text;
  return text;
};

If you decide to implement this method, ensure that you wait for the webpage fonts to load properly to obtain accurate width measurements.

document.fonts.ready.then(function () {})

To accommodate titles with the text-align: center; property, I incorporate a margin-left/right: auto; adjustment on the duplicate element which is factored into the calculated left value using:

parseInt(window.getComputedStyle(invisibleTitle).marginLeft)

While this workaround may not be ideal, it remains the most viable option given the lack of straightforward CSS solutions.

Answer 3

Answer №2

If it's possible to separate the two lines in the heading, follow this HTML structure:

<header>
    <div>
        <div class="first-line">
            <p>
                Sample title, pretty long
            </p>
            <div className={css.container}>
                <div className={css.shine1}></div>
                <div className={css.shine2}></div>
                <div className={css.shine3}></div>
            </div>
        </div>
        <p>
            That is wrapping into two lines
        </p>
    </div>
</header>

CSS:

header .first-line{
  position: relative;
  display: inline-block;
}
.container {
  position: absolute;
  display: inline;
  top: 20px;
  right: 5px;
}
.container div {
  position: absolute;
  height: 5px;
  border-radius: 5px;
  background-color: red;
  transform-origin: bottom left;
}
.shine1 {
  width: 26px;
  transform: rotate(-95deg) translate(20px, 5px);
}
.shine2 {
  width: 32px;
  transform: rotate(-45deg) translate(20px);
}
.shine3 {
  width: 26px;
  transform: rotate(0deg) translate(15px);
}

Answer 4

If it's possible to separate the two lines in the heading, follow this HTML structure:

<header>
    <div>
        <div class="first-line">
            <p>
                Sample title, pretty long
            </p>
            <div className={css.container}>
                <div className={css.shine1}></div>
                <div className={css.shine2}></div>
                <div className={css.shine3}></div>
            </div>
        </div>
        <p>
            That is wrapping into two lines
        </p>
    </div>
</header>

CSS:

header .first-line{
  position: relative;
  display: inline-block;
}
.container {
  position: absolute;
  display: inline;
  top: 20px;
  right: 5px;
}
.container div {
  position: absolute;
  height: 5px;
  border-radius: 5px;
  background-color: red;
  transform-origin: bottom left;
}
.shine1 {
  width: 26px;
  transform: rotate(-95deg) translate(20px, 5px);
}
.shine2 {
  width: 32px;
  transform: rotate(-45deg) translate(20px);
}
.shine3 {
  width: 26px;
  transform: rotate(0deg) translate(15px);
}

Guide to positioning an element directly following the initial line of a title

Answer №1

Answer №2

Similar questions

Utilizing MongoDB's object within the mapper function in MapReduce

The Electron React app crashes due to difficulty parsing the source map

What is the origin of the second parameter in an arrow function that returns another arrow function in a React component with Redux?

Adding CSS3 animation to a button to enhance its appearance when its icon undergoes a transformation

The Vuetify Jest button trigger fails to function properly despite utilizing a spy

Extracting Text from a Span Element Using XPath in Selenium

Enhance HTML Performance with Resource Preloading

Alter the background color of the entire document to (EDIT) in the top dialog box

Maintain the HTML font color when printing - Issue with IE settings, not the printer

Utilize IntelliJ's TypeScript/JavaScript feature to extract a method from all instances

What is the best way to activate a function within an npm package in a Vue application?

I'm having trouble with the routing of a Node.js REST API built with Express and Mongoose

What is the reasoning behind next.js requiring the use of modular CSS instead of a global stylesheet linked to each page?

Implementing a jQuery plugin and AngularJS for post-render actions

Is there a way in Vue to switch between encrypted and unencrypted content in an input field?

Issues with undesirable spacing in CSS using the display property and table-cell display type

Update the font style of the navigation bar

Issue with the Animated Skill Bar not functioning properly when scrolling

Add a variety of images

Is it possible to create a hyperlink in the <button> element?