Avoiding line breaks when using an :after pseudo element

I am trying to style external links by adding a pseudo :after element right after the link itself, but I'm having trouble getting it to work on the same line. Here is the CSS code I have:

a:not([href*="domain"])::after {
  content: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2211%22%20viewBox%3D%220%200%2010%2011%22%3E%3Cpath%20d%3D%22M4.5%203.5h-4v6h6v-4%22%20fill%3D%22transparent%22%20stroke%3D%22%23ff5b5e%22%2F%3E%3Cpath%20d%3D%22M4.5.5h5v5L9%206%207.5%204.5l-3%203-2-2%203-3L4%201z%22%20fill%3D%22transparent%22%20stroke%3D%22%23ff5b5e%22%20stroke-width%3D%221.001%22%2F%3E%3C%2Fsvg%3E);
  position: relative;
  top: -3px;
  margin: 0 1px 0 3px;
}

Here is an example of how the link should look like in HTML:

<a href="https://de.m.wikipedia.org/wiki/Datei:Young_people_in_Hong_Kong_using_smartphones_whilst_walking.png" class="nomark">
  <figcaption class="img-caption text-center !my-0 !py-0">
    Young people in Hong Kong using smartphones whilst walking </figcaption>
</a>

If you want to see the effect live, here is a link to a JSFiddle:

Check out the JSFiddle here.

htmlcsspseudo-element

Answer №1

To ensure that the figcaption element does not take up the full width, it is recommended to set its display property to inline-block since its default property is set to display:block.

a:not([href*="domain"])::after {
  /* Styling for external links */
  content: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2211%22%20viewBox%3D%220%200%2010%2011%22%3E%3Cpath%20d%3D%22M4.5%203.5h-4v6h6v-4%22%20fill%3D%22transparent%22%20stroke%3D%22%23ff5b5e%22%2F%3E%3Cpath%20d%3D%22M4.5.5h5v5L9%206%207.5%204.5l-3%203-2-2%203-3L4%201z%22%20fill%3D%22transparent%22%20stroke%3D%22%23ff5b5e%22%20stroke-width%3D%221.001%22%2F%3E%3C%2Fsvg%3E);
  position: relative;
  top: -3px;
  margin: 0 1px 0 3px;
}

figcaption {
  display: inline-block;
}
<a href="https://de.m.wikipedia.org/wiki/Datei:Young_people_in_Hong_Kong_using_smartphones_whilst_walking.png" class="nomark">
  <figcaption class="img-caption text-center !my-0 !py-0">
    Young people in Hong Kong using smartphones whilst walking </figcaption>
</a>

Alternatively, you can set the position of the pseudo element as absolute, with a as its relative parent.

a {
  position: relative;
  display: inline-block;
}

a:not([href*="domain"])::after {
  /* Styling for external links */
  content: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2211%22%20viewBox%3D%220%200%2010%2011%22%3E%3Cpath%20d%3D%22M4.5%203.5h-4v6h6v-4%22%20fill%3D%22transparent%22%20stroke%3D%22%23ff5b5e%22%2F%3E%3Cpath%20d%3D%22M4.5.5h5v5L9%206%207.5%204.5l-3%203-2-2%203-3L4%201z%22%20fill%3D%22transparent%22%20stroke%3D%22%23ff5b5e%22%20stroke-width%3D%221.001%22%2F%3E%3C%2Fsvg%3E);
  position: absolute;
  top: -3px;
  right: -17px;
  margin: 0 1px 0 3px;
}
<a href="https://de.m.wikipedia.org/wiki/Datei:Young_people_in_Hong_Kong_using_smartphones_whilst_walking.png" class="nomark">
  <figcaption class="img-caption text-center !my-0 !py-0">
    Young people in Hong Kong using smartphones whilst walking </figcaption>
</a>

Answer №2

Utilizing Flexbox for Styling:

a:not([href*="domain"])::after {
  /*Adding styles for external links */
  content: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2211%22%20viewBox%3D%220%200%2010%2011%22%3E%3Cpath%20d%3D%22M4.5%203.5h-4v6h6v-4%22%20fill%3D%22transparent%22%20stroke%3D%22%23ff5b5e%22%2F%3E%3Cpath%20d%3D%22M4.5.5h5v5L9%206%207.5%204.5l-3%203-2-2%203-3L4%201z%22%20fill%3D%22transparent%22%20stroke%3D%22%23ff5b5e%22%20stroke-width%3D%221.001%22%2F%3E%3C%2Fsvg%3E);
  margin: 0 1px 0 3px;
}

a {
  display: flex;
  align-items: center;
}
<a href="https://de.m.wikipedia.org/wiki/Datei:Young_people_in_Hong_Kong_using_smartphones_whilst_walking.png" class="nomark">
  <figcaption class="img-caption text-center !my-0 !py-0">
    Young people in Hong Kong using smartphones whilst walking </figcaption>
</a>

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

How to Vertically Align an HTML Element Inside a Div with Changing Height

Similar Question: Issue with vertical alignment Is there a way to ensure that the <a></a> is always vertically centered within this div, regardless of its size? View example here Thank you! ...

css

What is the best way to eliminate the alert message "autoprefixer: Greetings, time traveler. We are now in the era of CSS without prefixes" in Angular 11?

I am currently working with Angular version 11 and I have encountered a warning message that states: Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning "autoprefixer: Greetings, time traveler. We are now in the era of prefix-le ...

javascriptcssangularautoprefixer

Issues with jQuery horizontal sliding gallery functionality

My attempt at creating a jQuery sliding video gallery is not working as I hoped. Instead of scrolling through the images when clicking arrow buttons, the entire div moves left or right depending on the direction. HTML: <div id="videocontainer"> & ...

jqueryhtmlcss

Sending a value to a text box using json data transmission

I am having trouble accessing data from a js file and fetching the value to an html text box. Despite trying, I'm unable to get the desired result. Below are the contents of samle.js file and jsonhtml.html file: { "var1": "1", "var2": "2" } <scri ...

javascriptjqueryhtmljson

What could be the reason behind ng-bind-html only displaying text and not the link?

Utilizing ng-repeat to exhibit a list on my webpage. One of the fields in my data contains a URL that I want to display as an actual link within my HTML page. Please refer to the screenshots below: My HTML: My rendered page: I have included the angular- ...

javascripthtmlangularjs

Is it feasible to set a default value in an HTML input field that is not editable using JavaScript?

Is there a way to set a default value in an input field of HTML that is not editable, and then allow users to add additional text to it? For example, having 'AB' as the default and uneditable starting characters, followed by any numbers such as A ...

javascripthtml

Generate clickable links on a web page with PHP and a form

Every week I find myself tediously creating links by manually copying and pasting. It's starting to feel like a crazy process, and I'm sure there must be a faster way. A123456 B34567 d928333 s121233 I need these numbers to be transformed into h ...

phpjavascripthtml

Attempting to design a uniform question mark enclosed within a circle using CSS

I'm attempting to use CSS to create a glyph of a question mark inside a circle, similar to the copyright symbol ©. a::before { content: '?'; font-size: 60%; font-family: sans-serif; vertical-align: middle; font-weig ...

htmlcsspseudo-element

Thumbnail vanishes upon being selected

To access my template site currently, please click here. Currently, the first thumbnail on my website is set up to display a gallery of images in FancyBox once clicked, similar to a question asked on StackOverflow that you can view here. Below is a snipp ...

jqueryhtmlcssfancybox

Error in Blinking Tooltip when Hovering Skill Bubble (React and d3)

I've encountered a frustrating issue with tooltips on my website - they just won't stop blinking when I hover over the skill bubbles. I tried fixing the tooltips at a certain location, but whenever there's a bubble in that spot and I hover o ...

javascripthtmlcssreactjsd3.js

Revamping HTML Label 'for' with JavaScript: Unveiling Effective Techniques

I'm facing an issue with changing the target of a label that is associated with a checkbox using JavaScript. Here's the code I have: <input type="checkbox" id="greatId" name="greatId"> <label id="checkLabel" for="greatId">Check Box&l ...

javascripthtmllabel

Is there a way to prevent the slide-out bar from automatically hiding when selecting an item from its list?

I am facing an issue with my dashboard that has a slideout sidebar. Whenever I press the toggle button, the sidebar slides out as expected. However, when I click on any tab within the sidebar, it hides again. I only want it to hide when toggled. My code is ...

javascriptjqueryhtmlcss

Setting the font size for the entire body of a webpage globally is ineffective

Technology Stack: Nuxt.js + Vuetify.js Problem: Unable to set global body font size Solution Attempt: I tried to adjust the body font size to 40px in ~/assets/style/app.styl: // Import Vuetify styling ...

javascriptcssvue.jsvuetify.jsnuxt.js

What is the best way to design a dynamic menu using HTML, CSS, and jQuery, where each li element gradually disappears?

Consider this menu structure: <ul class="main-menu"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> My task is to dynamically hide th ...

javascriptjqueryhtmlcss

Sending data to a React component from regular HTML

I have a question about implementing a method to pass custom attributes from HTML elements as props to React components. Here's an example: function someFunction(props) { return <h1>props.something</h1> } HTML: <div id="someEl ...

javascripthtmlreactjstypescriptfrontend

Increase the height of an element based on the content of the text within

Today I am facing a challenge: I need the text below to change when I click on one of these icons: Luckily, it works with the following code: CSS .games-text { background-color: $color-primary; & p { max-width: 90rem; text-a ...

javascripthtmljquerycssweb

The outer DIV will envelop and grow taller in conjunction with the inner DIV

Could use a little help here. Thank you :) I'm having trouble figuring out how to get the outer div to wrap around the inner div and expand upwards with the content inside the inner editable div. The inner div should expand from bottom to top, and t ...

javascripthtmlcss

Combining keyframe properties in a more efficient way using less code

While attempting to develop a LESS mixin for CSS3 keyframes, I encountered the typical way of chaining IDs and classes: #idOne, #idTwo, .classOne, .classTwo { ... } Nothing groundbreaking there. What I'm currently working on is crafting the foll ...

cssanimationlesscss-animations

What could be the reason for the CSS file not getting applied to the HTML in my project?

Having trouble applying an external CSS file to my HTML file. Currently working on a Cloud IDE (goormIDE, similar to C9) and trying to link an external CSS file to my HTML file on the web server using Node.js. However, the CSS file is not being applied to ...

htmlcssnode.js

Dynamic presentation created with Serif software

As a newcomer to web coding and one of the older generation, I recently created a basic .swf slideshow using Serif's graphic software. However, I realized that it does not display on an Apple iPad. You can experience this issue quickly here. My questi ...

javascripthtmlflash