:after css is creating issues

css :after not working
css after image
before after css
css after ( content html)
scss after
css after not showing
css content
css after hover

I've been facing a problem - I need to make a category page for an e-commerce website. The client's required design depicts that they need to get a horizontal line after the category title (which is dynamic).

I've done it to this part.

However, the issue arises when the client needs to change the category name. In the attached picture, it says "Category 2". Client may change it to 'Men's Collection', 'Winter Collection', 'Men' or whatever.

The problem is, since we don't know about the width that this category name is going to occupy, how can I manage the horizontal line's width (highlighted in a red box).

I'm also putting a screenshot of the css that I've applied.

The position of the line being absolute, width does need to be managed.

How can I manage this width? :(

Use a flexbox to solve the issue- see the example below:

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
.wrapper:after {
  content: '';
  flex: 1;
  height: 1px;
  background: #ccc;
  margin-left: 10px;
<h1 class="wrapper">
  category name

::after (:after), In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with� I've been facing a problem - I need to make a category page for an e-commerce website. The client's required design depicts that they need to get a horizontal line after the category title (which is

IDK why is my question demoted.

However, I've done a little thing that will work fine =>

  1. For the "Sort By" section, I've made the background color white.
  2. For the whole row containing the category, :after line and Sort By section, I've hidden the overflow.

That's working fine, however I'ld have appreciated only if I could get some other approach to work.

Learning To Use The :after And :before Pseudo-Elements In CSS , Although the CSS specification contains other pseudo-elements, I'll focus It creates a phoney element and inserts it before or after the content of Fortunately, a lack of pseudo-elements will not cause huge usability issues. Special characters. As this is CSS; not HTML, you can not use markup entities in content values.If you need to use a special character, and can not enter it literally into your CSS content string, use a unicode escape sequence, consisting of a backslash followed by the hexadecimal unicode value.

Well it should be dynamic if you specify the width of the :after element as a percentage. Since it is getting the width of the parent (which is the title), the width will adjust on the percentage amount of whatever the title is.

Common CSS Issues For Front-End Projects — Smashing Magazine, A list of common issues along with their solutions. In CSS grid, the repeat function can create a responsive column layout without requiring� Note: IE8 and Opera 4-6 only support the old, single-colon CSS syntax (:before). Newer versions support the standard, double-colon CSS syntax (::before). Note: For :before to work in IE8, a <!DOCTYPE> must be declared.

::before / ::after, The ::before and ::after pseudo-elements in CSS allows you to insert Rest of stuff inside the div --> after </div> Little issues: CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. A common UI pattern that we see on the web are dropdown menus. They’re used to display related information in pieces, without overwhelming the user with buttons, text, and options. Somewhere that we see these a lot is inside of headers or navigation areas on websites. Let’s see if we can make one of these menus with CSS alone.

4 common CSS problems and how to solve them, Since we used the ::before pseudo-element to create the box, we'll now use the :: after pseudo-element to make our check. The CSS for the� Also, swiping left and right moves the items up and down in their wrapper, which is unexpected and weird. Setting the overflow to hidden does not alleviate this issue. Conclusion. According to Can I Use, CSS transforms are currently supported by over 93% of users (at the time of this writing, November 2016), so there’s no issue there.

I'm facing issues with CSS after I run build. � Issue #8375 � facebook , Describe the bug: CSS Works fine in local but it ruins the css after i run build to run via the I see the same css issues if i run with python server on my local computer. So there's some issue in the way build is being created. Only CSS applied at the root page is displayed in the Theme pane. Although if you try uploading a CSS file with a same name as any other CSS file available in the portal, Power Apps portals Studio asks you to replace that file. Power Apps portals Studio is currently not supported on Safari in Mac operating system and has the following issues:

  • Do note that I also need to manage the "Sort By" button there! I'm not sure if this is going to work well there too...
  • @r0nn13 give a similar flexbox to the wrapper that includes this and the sort by section...
  • Your question is "demoted" because questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: How to create a minimal reproducible example
  • I've included the desired behaviour, specific problem, and even the code too. I believe my question was clear too. Well, nevermind. I've learnt something from here, so I guess it's not a big deal. :)
  • You need to include actual code - not a picture of it