Adding an element below the 3rd line using CSS

Here's the HTML code I need help with:

<style>
  .ad { margin: 15px; height: 30px; background-color: #7f7f7f; }
  .article { width: 300px; font-size: 24px; line-height: 30px; border: 1px solid; }
</style>
<div class="ad"></div>
<div class="article">
  asd asd asd asd asd asd asd asd
  asd asd asd asd asd asd asd asd
  asd asd asd asd asd asd asd asd
  asd asd asd asd asd asd asd asd
  asd asd asd asd asd asd asd asd
  asd asd asd asd asd asd asd asd
  asd asd asd asd asd asd asd asd
  asd asd asd asd asd asd asd asd
</div>

I'm looking to insert an advertisement within the article, specifically between the 3rd and 4th lines. Is it possible to achieve this using CSS alone? If not, are there alternatives like JavaScript or PHP that could help accomplish this task? The article content is stored as a string in PHP, making it challenging to pinpoint the exact location of the 3rd line.

Note that the article contains HTML tags, ruling out character counting as a solution. Additionally, the placement of the .ad tag relative to the .article tag can vary.

Your assistance in resolving this dilemma would be greatly appreciated. Thank you!

htmlcss

Answer №1

If you're working in html, pressing the Enter key won't take you to the next line. Instead, you'll need to use the line break tag <br> in html. Your code should look something like this:

<div class="article">
  asd asd asd asd asd asd asd asd<br>
  asd asd asd asd asd asd asd asd<br>
  asd asd asd asd asd asd asd asd<br>
  asd asd asd asd asd asd asd asd<br>
  asd asd asd asd asd asd asd asd<br>
  asd asd asd asd asd asd asd asd<br>
  asd asd asd asd asd asd asd asd<br>
  asd asd asd asd asd asd asd asd<br>
</div>

To locate the third line and insert your ad div, you can utilize jquery:

$(".article br:nth-child(3)").after('<div class="ad"></div>');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dividing the webpage background into separate sections to showcase a variety of colors, patterns, and more

I'm in the process of dividing the background on my website into distinct areas. My goal is to have the patterned area extend both horizontally and vertically on either side until it reaches the edge of the visible webpage. Figuring out how to achiev ...

htmlcss

Tips on eliminating the letter 'X' from a text/search input field in HTML

There are various solutions available for removing the "X" from an input field in IE 10+ browsers. I have tried multiple approaches without success. For example, I have referenced: ans 1 ans 2 ans 3 Despite implementing all of these solutions, I still ...

javascriptjqueryhtmlcssinternet-explorer

creating a table displaying data in a horizontal format sourced from ajax/json transformation

I am currently working on a piece of code that retrieves a list of IDs from local storage and compares them to IDs in a JSON file. If there is a match, the corresponding data is displayed in a table. However, I am facing an issue with my table layout as i ...

jqueryhtmlajax

Retrieve the webpage content (including any iframes) using a Firefox plugin

Hello there! I am currently working on retrieving data from a webpage that is updated using Javascript. Initially, I attempted to create a Java program to periodically fetch this page from the server, but the information was being updated too slowly. The ...

javascripthtmlfirefoxbrowser

The width of the column is not the same

Despite setting both columns to equal widths using col-sm-6 in Bootstrap, the column widths are not actually equal. One appears smaller while the other is larger. If you have a solution to this issue that works on both mobile and laptop devices, please s ...

htmlcssbootstrap-4

Showing and presenting Vue components using v-html

My database stores HTML content for my posts, like the example below. On the post page, I display the content using the following: <span v-html="content"></span> I'm curious about how I can make Vue Components work within HTML content fe ...

javascripthtmlvue.jsvuejs2

Table featuring identical submit buttons in each row: initial submit button is nonfunctional (potential issue with multiple identical IDs)

My table displays product files, with the option to add notes. If a note is added, it shows in a row. If not, a text area field with a submit button appears instead. Everything seems to be working well, except for the first row without a note. After addin ...

htmlcssforms

Ways to remove the extra space above and below text within a td element

My goal is to make the background change when a user hovers over the td element. The current behavior of my code can be seen in the image below: I am working to eliminate the white space so that the gradient fills the entire td/cell. The following code s ...

htmlcsshtml-table

Do not exceed 3 elements in a row when using Bootstrap's col-auto class

col-auto is excellent. It effortlessly arranges items by size in a row, but I need it to strictly limit the number of items in each row to a maximum of 3. Each row should only contain between 1-3 items. <link rel="stylesheet" href="https://cdn.jsdeli ...

htmlcssbootstrap-4bootstrap-5

Html Canvas Overlay that allows content underneath to remain interactive

Trying to layer the canvas outlined in red over the div with a black border that is currently underneath. The canvas should match the size of the div, and I need to be able to interact with buttons and text beneath it. I've been at this for 48 hours a ...

javascripthtmlcsscanvas

Variation in text size on main page compared to individual posts on Blogger

Lately, I've been facing a peculiar issue with my blog. The font size of the body post on the front page looks just right, but as soon as I click on the post itself, the text shrinks to a really small size. I tried adjusting the font size in .post-bod ...

htmlcssfontsblogger

Tips for adjusting the color of multiple classes that have a common class using a toggle feature

I am working on a simple website using bootstrap 4 and SCSS. I want to include a toggler that switches between dark and light modes on the webpage. However, I'm facing an issue with changing the background color of 6 Bootstrap cards, footer, and the t ...

javascripthtmlcssbootstrap-4

Issue with text input field causing the Enter key to not create a new line

In the example above, the text is placed in the middle of the text area. Here is the CSS code : .form-control { height: 300px; display: block; width: 100%; padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-heig ...

javascriptcssreactjs

Issue with loading another module using the require function in onClick node js function

I am trying to implement the following code: <!DOCTYPE html> <html> <body> <h1>HTML DOM Events</h1> <h2>The onclick Event</h2> <p>The onclick event triggers a function when an element is clicked on.</p&g ...

javascripthtmljquerynode.jsonclick

Changing the Parent div style based on checked radio input in Reactjs

As a Reactjs beginner, I am looking for assistance in changing the background color of a faculty item (.faculty) to red when the respective radio input is checked. This should be achieved using the onChange method in Reactjs. Thank you in advance for you ...

htmlcssreactjs

Substitute the text with various phrases that include the specified pattern

Imagine you have a string such as $str = "<img src='i12'><img src='i105'><img src='i12'><img src='i24'><img src='i15'>...."; Can we replace each i+n with the corresponding va ...

phphtmlarrayssearch

Sending multiple AJAX post requests in succession

I'm encountering an issue with my AJAX POST request for a login form. Every time I submit the form, regardless of whether the combination is correct or incorrect, it sends multiple requests Incorrect login: function incorrect() { $('#loginM ...

javascriptc#htmlajaxmodel-view-controller

Exploring the use of dictionaries within Django templates

views.py: return render(request,'images.html',temp) Temp Data: {'cluster1': ['temp/vinoth/cluster1/demo-pic94.jpg', 'temp/vinoth/cluster1/id1.jpg'], 'cluster2': ['temp/vinoth/cluster2/demo-pic94.jp ...

htmldjangodictionarydjango-templates

I'm struggling to confirm the accuracy of my calculations

I'm facing an issue with validating my form. I've created a script based on calculations outlined below <script> var class_let = new Array(); class_let["Class A"]=10; class_let["Class B"]=20; class_let["Class C"]=40; class_let["Class D"]=5 ...

javascripthtml

Tips for creating a CSS transition that reverses direction

Is there a way to create a hover effect where a border appears at the bottom of an element when it is being hovered over, and then retracts back when the mouse leaves the element? I've managed to get the border to appear on hover using CSS, but I&apos ...

htmlcsscss-transitions