Background in CSS ::after pseudo-element not showing up

I've been attempting to show a tick image after a div element, but no matter what CSS properties I try, I can't seem to get it right.

Previous answers to similar questions haven't provided the solution I need.

HTML:

<div class="link-input-container">
  <input class="link-input" placeholder="Paste link here..." type="text" class="url_input" name="url_input">
</div>

CSS:

.link-input {
  font-family: Courier New;
  font-size: 12px;
}

.link-input-container::after {
  display: block;
  content: "";
  width: 12px;
  height: 12px;
  background: transparent url('https://cdn0.iconfinder.com/data/icons/weboo-2/512/tick.png') no-repeat;
}

Fiddle: http://jsfiddle.net/mk3fauk5/

css

Answer №1

The issue was that the background image was too large, causing only empty space to be visible. Simply define the size and position of the background to fix it: SEE DEMO

.link-input-container::after {
  display: block;
  content: "";
  width: 64px;
  height: 64px;
  background: transparent url('https://cdn0.iconfinder.com/data/icons/weboo-2/512/tick.png') no-repeat;
  background-size: contain;
  background-position: center;
}

Answer №2

Your background image is larger than the actual div you are targeting with the ::after pseudo-element.

To fix this, you can update your CSS with the following code:

.link-input-container::after {
  display: block;
  content: "";
  width: 64px;
  height: 64px;
  background: transparent url('https://cdn0.iconfinder.com/data/icons/weboo-2/512/tick.png') no-repeat;
  background-size: 100%;
}

You can view the updated code example here:

https://jsfiddle.net/jn7cq5c9/

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

The shadow is obscured by a block that has an 'overflow: scroll' property

One block on the left displays the list, while another shows detailed information with a shadow effect. The issue arises when the left block has 'overflow: scroll', causing elements' backgrounds to spill over the shadow. .div-left { flo ...

htmlcssoverflowshadow

Guide to utilizing the bootstrap grid system to stack below a width of 480px

I have been grappling with this issue, but unfortunately, there seems to be a lack of information on how to resolve it. I have gone through numerous old posts where individuals are "modding" the files and creating their own col-ms (medium-small) that stack ...

csstwitter-bootstrap

Angular - creating adaptive HTML container with CSS styling

I am trying to achieve a layout similar to the one shown in the image. A container can have multiple elements starting within it or no elements at all. The elements always have a fixed height, and the container's height is determined by the number of ...

htmlcssangular

Implementing CSS styles according to user preferences. Switching between dark mode and light mode based on subscription

Is there a way to dynamically change CSS property values based on user interaction, such as toggling between dark mode and light mode? I am currently exploring the option of setting up a subscription to track these changes, but I want to know how I can act ...

javascripthtmlcssangular

It appears that the query parameters are impacting the speed at which the page loads

I am currently developing a project on this platform. It is using c9.io, an innovative browser-based collaborative programming IDE. The index.php file includes the following script: <?php $path = ltrim($_SERVER['REQUEST_URI'], '/&ap ...

javascriptphphtmlcss

What is the best way to reposition an element to the end of its flexbox container?

I have a flexbox-container that contains multiple details-elements with flex-wrap behavior. My goal is to have a details-element move below the other elements within the container when it is opened. For example, I want it to go from this initial layout: ...

javascripthtmlcssflexboxhtml-tag-details

Angular 2's Component background color styling

Within my Home component, there is a carousel component. I want the background color of the home section to be Gray and the background color of the carousel to be blue. Unfortunately, I am having difficulty setting a background color for the body tag of t ...

cssangular

Separate Your Navbar with Bootstrap 4 Separators

I'm facing a challenge in adding separators within a navigation bar between the navigation items. I am unsure how to evenly space out the padding on these separators next to each navigation item. https://i.sstatic.net/vjYti.png Another issue I encou ...

htmlcssbootstrap-4

Is there a way to smoothly scroll while resizing a div using Resizable Jquery?

I've implemented AdminLTE 3 template and added a resizable div using jQuery-UI. When I expand the div's height, the page doesn't automatically scroll down with it. I don't want to add a scrollbar to the div; instead, I want the entire p ...

phpjqueryhtmlcssjquery-ui

The modal is not displayed when the on click listener is triggered

I'm a beginner in the world of programming and I'm currently working on creating modals that pop up when clicked. However, I'm facing an issue where the pop-up message doesn't appear when I click the button. Oddly enough, only the overl ...

javascripthtmlcss

Creating a scrollable nested div on a mobile website

Is there a way to achieve a scrollable nested div on a jQuery mobile site? I am aiming for a fixed header and footer with the middle section being scrollable. Despite my attempts to set overflow:scroll (along with specifying the width and height of the div ...

csshtmljquery-mobilescrollable

Incorporating Materialize CSS and MaterialUI within a single React Application

Presently, I have a straightforward non-React application built with HTML, Materialize, and JavaScript that I am considering converting to React while also making the switch from MaterializeCss to MaterialUI. However, I am not looking to make this transiti ...

cssreactjsmaterial-uimaterialize

"Maximize user experience: Eliminate the "#" in your URL by utilizing anchor tags for one-page navigation in

I've created a website with menu tabs including Home, About, Work, and Contact. To make navigation easier, I've used anchor tags for this one-page layout. However, I'm concerned about the URLs updating when clicking on the tabs. I prefer to ...

htmlcsswordpressmenuanchor

Scrolling vertically without the appearance of a scrollbar

I've searched all over the internet for a solution to my problem, but nothing seems to work for me. I want to keep vertical scrolling ability while hiding the scrollbar from view in the y direction all the time. The challenge is to make my #content-m ...

javascriptjqueryhtmlcss

Avian-themed masking feature for jCarousel

Currently, I have a series of images in constant motion using jCarousel. Only one image is visible fully at any given time, and I am looking to create a "feathering" effect on the edges of the carousel so that the images smoothly fade in and out as they co ...

javascriptjqueryhtmlcssjcarousel

I am struggling to get the pop-up to close using the current code. I suspect that the issue might be related to the variable I was previously using in WordPress. I have made changes but the pop-up

While delving deeper into the realm of Javascript, I encountered a stumbling block with a single popup intended for the main page of a WordPress website I am constructing. Despite my attempts to modify the code's variables, they seem unyielding. Surpr ...

javascripthtmlcss

What is the process for choosing an element, wrapping it in a <div>, and appending a class to it using only JavaScript?

When constructing a responsive website, all CMS entries are in markdown. It's not feasible to manually code the div into each new entry, so dynamic class addition is necessary. The task at hand involves selecting an <img> within a post and wrap ...

javascripthtmlcss

I tried to import Bootstrap into my project, but it seems to be malfunctioning

Is there a way to display cards in a slider format? I want the carousel to show the next card on each click. I tried importing Bootstrap into my project but it doesn't seem to be functioning as expected. Here's the link to the tutorial I am usi ...

cssreactjsbootstrap-4react-bootstrap

how can you make keyframe animation pause at the last stage?

Here is an example of utilizing CSS animations: .show-left-menu { -webkit-animation-name: leftSidebarAni; -webkit-animation-duration: .25s; -webkit-animation-timing-function: ease-out; -webkit-animation-iteration-count: 1; } @-webkit-keyframes l ...

css

Diverse Browser Image Mapping Coordinates

I am in the process of creating an image map, where I specify coordinates on an image that link to other pages. However, I'm encountering an issue where the position of these coordinates is not relative. When viewing the image on a different browser ...

javascriptjquerycssimagemap