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

What is the best way to change a date from the format DD/MM/YYYY to YYYY-MM-DD

Is there a way to use regular expressions (regex) to convert a date string from DD/MM/YYYY format to YYYY-MM-DD format? ...

javascripthtmljsonregex

When using PHP to send Push Notification messages, I am encountering a problem where I am receiving a backslash () and an apostrophe ('

My PHP script is designed for sending push notification messages to phones. We can successfully send and receive normal messages, but encounter issues when using an apostrophe (') in the message. After researching online, I discovered a PHP function c ...

phphtmliosregex

Can a search engine algorithm be developed to display an iframe based on the keywords entered in the search query?

Is it possible to create a search engine algorithm in HTML, CSS, and JavaScript that takes keywords from a search bar input and displays the best solution (or solutions) through iframes? html, css, javascript Below is the code for the iframes and search ...

javascripthtmlcssalgorithmiframe

Looking to minimize the amount of HTML code in Angularjs by utilizing ng-repeat

Working with some HTML <tr class="matrix_row" ng-repeat="process in matrixCtrl.processes | filter : { park: parentIndex } track by $index"> <td class="properties" ng-click="dashboardCtrl.currParam=0; dashboardCtrl.currentProcess=process"> ...

javascripthtmlangularjsangularjs-ng-repeat

JQuery mishandles its left positioning

Here's the code snippet I've been working with: $(this).closest("p").after('<strong>' + arMess[iCurIndex] + '</strong>').next().animate({ top: $(this).offset().top - 57, left: -$(this).widt ...

javascriptjqueryhtmlcss

What is the best way to customize the appearance of the elements in the hamburger menu within a Bootstrap navigation bar?

I have successfully implemented a responsive navbar using Bootstrap 4. When the screen size is large, there are 2 buttons displayed, and when it's small, a hamburger menu appears. [insert image description here][1][insert image description here][2] ...

cssbootstrap-4responsive-designnavbarhamburger-menu

Having trouble with jQuery's scrollLeft function on elements that are not currently visible

Within a large container DIV that contains numerous other elements and has a scroll bar, an issue arises when determining the value of scrollLeft. When the DIV is visible, the scrollLeft() function returns the correct value, but when the element is hidden, ...

javascriptjqueryhtmlcss

Attempting to navigate the world of AJAX and PHP

My experience with AJAX is limited, but I am currently working on a project that requires a form to submit data without refreshing the page. The goal is to display the result in a modal window instead. To achieve this functionality, I understand that imple ...

javascriptphphtmlajax

Customizing the appearance of the dragged element in jQuery UI

Is there a way to modify the color of a draggable list item after it has been dragged? Any assistance is greatly appreciated. $("#DragWordList li").draggable({helper: 'clone'}); ...

cssjquery-ui

Steps to record and upload a video directly to the server using getusermedia

For my application, I need the user to record a video and have it saved on the server disk instead of downloading it to the client browser. I am currently using getusermedia for this purpose, with the following code: (function(exports) { exports.URL = exp ...

c#jqueryhtmlhtml5-canvasgetusermedia

Preventing Multiple Form Resubmissions in PHP

I have multiple forms that require navigation from the initial form to the final form. Each form includes both 'NEXT' and 'BACK' buttons for moving forward and backward in the process. I am looking for a way to prevent the confirmation ...

javascriptphpjqueryhtmlforms

arranging texts in a vertical stack with wrapping

Looking to change the orientation of my horizontally wrapped list items from vertical to horizontal. Take a look at my code snippet: HTML <ul> <li>Long text goes here.</li> <li>Another Longer Text Goes Here</li> < ...

htmlcsswhitespaceword-wrap

Angular-ui does not support the ng-disable directive

<h3 class="pulse-green-text"><span class="icon ico_pulse_download"></span>VPN Certificate</h3> <div class="vpn-cert" ng-controller="vpnController vpnCert"> <form method="post" name="userform" class="form-horizontal" id="u ...

htmlangularjsangular-ui

Maintain the image's aspect ratio by setting the width equal to the height when the height is

I am uncertain if achieving this purely with CSS is possible, but it would be ideal. I currently have an image: <img src="#" class="article-thumb"> CSS: .article-thumb { height: 55%; } Is there a way to set the width equal to the height? My g ...

htmlcss

What is the best way to apply a background image to a DIV element using CSS

The main aim is to change the background image of a DIV using AJAX. $.getJSON("https://itunes.apple.com/search?term=" + searchTerm + '&limit=1' + '&callback=?', function(data) { $.each(data.results, fun ...

javascriptjqueryhtmlcss

What is the best way to store plain HTML text in a database?

Currently, I am working on PHP source code to insert the page created using Quill text editor. Although the text editor data insertion is working fine, it is not inserting plain text as desired. My goal is to insert HTML plain text instead. Below is the J ...

phphtmlmysqli

Exploring "Additional resources" using Selenium and Python

I am looking to extract text from the "Further reading" section of a Wikipedia article. My current code can open Google, input a request (such as 'Bill Gates'), and then find the URL of the corresponding Wikipedia page. Now I need help parsing th ...

htmlpython-3.xseleniumparsingselenium-webdriver

Tips for concealing select options after choosing with select picker?

Our establishment features three distinct rooms, each offering three identical options that users can choose from. https://i.sstatic.net/Jx4Me.png To illustrate, if a user named John selects option one in the first room, that same option will be hidden w ...

javascripthtmljquerybootstrap-5bootstrap-selectpicker

Creating PDF files with PDFkit in Node.js while rendering HTML data

I am looking for a way to generate a PDF file using the 'PDFkit' library. The data is being retrieved from a MySQL database, and some of the content includes HTML tags. However, when I try to render the HTML data to PDF using the 'html-to-te ...

htmlnode.jspdf-generationnode-pdfkit

Adjust the positioning of divs to account for changes in scale caused

I have 3 div blocks arranged on a web page, with the first one bigger and located on the left side while the other two smaller ones are positioned on the right side. I want their relative positioning to remain fixed across all browsers and zoom levels. Cur ...

csshtml