What is the best way to give a decorative border to a pseudo-element's before content?

Hey there, I have a question. I created a block with a protruding corner at the top and applied a corner effect using box-shadow. How can I achieve the same effect for a pseudo-element (.comment_text:before)

https://i.sstatic.net/laEIJ.png

.comment{
  margin-top: 20px;
  padding: 0px 20px 0px 20px;
}
.comment_text{
  max-width: 680px;
  background-color: #f1fbff;
  padding: 10px;
  margin-top: 15px;
  color: #FFF;
  position: relative;
  font-size: 12px;
  line-height: 20px;
  -webkit-box-shadow: 0px 0px 0px 1.5px #cfcfcf;
  -moz-box-shadow: 0px 0px 0px 1.5px #cfcfcf;
  box-shadow: 0px 0px 0px 1.5px #cfcfcf;
  color: #333333;
  font-size: 12pt;
  font-family: Arial, sans-serif;
}
.comment_text:before {
  content: "";
  display: block;
  border-bottom: 15px solid #f2fbff;
  border-right: 20px solid transparent;
  border-left: 0px solid transparent; 
  position: absolute;
  top: -15px;
  left: 22px;
}
<div v-for='comment in comments' class="comment">
  <div class="comment_text">Some Text</div>
</div>

css

Answer №1

To enhance the appearance of your Div border, consider adding a pseudo element (::after) and increasing its size slightly. Match the color to that of your Div border for consistency.

    .comment{
    margin-top: 20px;
    padding: 0px 20px 0px 20px;
  }
  .comment_text{
    max-width: 680px;
    background-color: #f1fbff;
    padding: 10px;
    margin-top: 15px;
    color: #FFF;
    position: relative;
    font-size: 12px;
    line-height: 20px;
    -webkit-box-shadow: 0px 0px 0px 1.5px #cfcfcf;
    -moz-box-shadow: 0px 0px 0px 1.5px #cfcfcf;
    box-shadow: 0px 0px 0px 1.5px #cfcfcf;
    color: #333333;
    font-size: 12pt;
    font-family: Arial, sans-serif;
  }
  .comment_text:before {
    content: "";
    display: block;
    border-bottom: 15px solid #cfcfcf;
    border-right: 20px solid transparent;
    border-left: 0px solid transparent; 
    position: absolute;
    top: -15px;
    left: 22px;
  }
  .comment_text:after {
    content: "";
    display: block;
    border-bottom: 18px solid #f2fbff;
    border-right: 20px solid transparent;
    border-left: 0px solid transparent; 
    position: absolute;
    top: -12px;
    left: 24px;
  }
<div v-for='comment in comments' class="comment">
      <div class="comment_text">{{ comment.text }}</div>
    </div>

Answer №2

Consider experimenting with adding attributes like Height and Width to achieve the desired outcome. Additionally, you can customize it further by incorporating a background color of your choice.

.comment_text:before {
    content: "";
    display: block;
    border-bottom: 15px solid #f2fbff;
    border-right: 20px solid transparent;
    border-left: 15px solid transparent; 
    position: absolute;
    top: -15px;
    left: 2px;
    height: 1px;
    width: 10px;
    background: blue;
}

Answer №3

.comment{
margin-top: 20px;
padding: 0px 20px 0px 20px;
}
.comment_text{
max-width: 680px;
background-color: #f1fbff;
padding: 10px;
margin-top: 15px;
color: #FFF;
position: relative;
font-size: 12px;
line-height: 20px;
-webkit-box-shadow: 0px 0px 0px 1.5px #cfcfcf;
-moz-box-shadow: 0px 0px 0px 1.5px #cfcfcf;
box-shadow: 0px 0px 0px 1.5px #cfcfcf;
color: #333333;
font-size: 12pt;
font-family: Arial, sans-serif;
}
.comment_text:before {
content: "";
display: block;
border-bottom: 15px solid #f2fbff;
border-right: 20px solid transparent;
border-left: 0px solid transparent; 
position: absolute;
top: -15px;
left: 22px;
box-shadow: -2px 0px 0px -0.5px #cfcfcf;  
}    
.comment_text:after {
content: "";
display: block;
width: 23px;
height: 0px;
top: -8px;
left: 20px;
box-shadow: 0px 0px 0px 1px #cfcfcf;
transform: rotate(35deg);
position: absolute;
}

https://i.sstatic.net/zDSmJ.png

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

Ensuring all Bootstrap columns have equal height to match the tallest one

I have several .col-md-2 elements on my Bootstrap website, each containing an image of varying height. I am looking to ensure that all the columns have the same height so that I can align the images horizontally. Below is the HTML code: <div class="r ...

htmlcsstwitter-bootstrap

When a child of a flex-item does not inherit the height of its parent in a flex container with a column direction and flex-basis set

Wow, that title was long! Let me try to clarify my confusion: So I have a flex-container with 2 flex items. <!-- HTML --> <div class="container"> <div class="item-1"> <div class="child-of-item-1"></div> < ...

htmlcssflexbox

two adjacent elements filling the entire height of the window at 100% dimensions

Is there a way to place two elements side by side, with one of them (the textarea) always being 100% height of the window? I've looked at similar questions here but can't figure out how to make it work. Can you help me with this? html: <div ...

javascripthtmlcss

Issues with Bootstrap Navigation Collapse Utilizing Data Attributes

I'm having trouble getting a Twitter Bootstrap 3 navbar to collapse using data attributes, as it is not expanding properly. Just to give some context, the project I am working on is an ASP.NET C# MVC project that runs on DNN (DotNetNuke) CMS. When I ...

javascripthtmlcsstwitter-bootstrap

Adding an overlay to a material UI table row: Step by step guide

My code is rendering a row in the following format: `<TableRow key={row.name} > <TableCell>{row.empId}</TableCell> <TableCell>{row.userId}</TableCell> <TableCell>{row.name}</TableCell> <TableCell>{r ...

javascriptcssreactjshtml-tablematerial-ui

Tips for removing empty space caused by the iPhone notch on your webpage

Hey there, I'm struggling to remove the blank space on my iPhone with a notch at the top of the screen. Do you have any advice on how to change the background color from the default white? My website is live and you can check it out at . I've att ...

htmlcssiphonenext.jsfrontend

What is the reason behind line-height not affecting the clickable area when reduced?

I have been working on a personal project where I added thumbnails for images that can be scrolled through and clicked to set the main image. However, I encountered a strange issue. To demonstrate the problem, I created a Stackblitz project here: https:// ...

cssangularonclickgrid-layoutline-height

Is it possible to have more than one button for each item on my Shopping List App?

I am developing a shopping list app that allows users to add items to a list. Each item added triggers the display of a button next to it, enabling users to remove the item from the list when needed. However, a problem arises as more items are added – i ...

javascriptjqueryhtmlcss

The center alignment doesn't seem to function properly on mobile or tablet devices

I've designed a basic webpage layout, but I'm facing an issue with responsiveness on mobile and tablet devices. The problem seems to be related to the width: 100% property in my CSS, but I can't seem to pinpoint the exact solution. While tr ...

htmlcssmobilewidthcentering

Insert more text following the existing content

Is it feasible to include text using pseudo-elements ::after or ::before to a specific word? For example, I am interested in placing a PDF icon consistently beside the word "Download". [PDF] Download Alternatively, are there other methods available? ...

csspseudo-element

Ensure that both the bootstrap buttons and images are aligned correctly on top of the divs

I am struggling to align three buttons vertically on top of two divs that fill the page. Currently, I can only position them horizontally, and my attempts to center them have not been successful. I have tried various methods like flex, changing positions, ...

htmlcssbootstrap-4

Applying a dynamic translate3d transformation on the ::after element using CSS3

My current challenge involves manipulating a pseudo ::after element using translate3d If I hardcode the values, it's straightforward: div::after { ... transform: translate3d(40px, 40px, 0); } Now, I want to dynamically set the value for the ...

javascripthtmlcss

Tips for styling your Angular Material Card on mobile devices

Currently, I am very happy with my desktop layout which looks like this: https://i.stack.imgur.com/tG0pw.png However, when it comes to the mobile version of my site, here is what I have so far: https://i.stack.imgur.com/KD1hh.jpg While I do like the ho ...

cssangularangular-material

Ensure that the main div remains centered on the page even when the window size is adjusted

Here is the code snippet: <div id="root"> <div id="child1">xxxx</div> <div id="child2">yyyy</div> </div> CSS : #root{ width: 86%; margin: 0 auto; } #root div { width: 50%; float: left; border: ...

javascriptjqueryhtmlcss

Is it possible to have a button within a table that, when clicked, opens a card overlaying the entire table?

I'm having an issue with a table and card setup. When I click the button in the table, the card that appears only covers part of the table. I want it to cover the entire table area based on the content inside the card. How can I make this happen? I&a ...

htmlcssangulartypescript

javascript An interactive accordion component created with Bootstrap

I have been searching for a solution to create an accordion-style collapsible set of panels where the panels remain separate and do not have headers. I want buttons on one side, and when clicked, a panel is displayed on the other side. Only one panel shoul ...

javascriptjqueryhtmlcsstwitter-bootstrap

Adjust the contents of a div to automatically fit within a hidden overflow div

Trying to fit the contents of a div (including an image, search bar, and three buttons stacked on top of each other) into another div with CSS styling that hides overflow has been a challenge. The CSS code for the div in question is: .jumbotron { overfl ...

jqueryhtmlcssbootstrap-4

How is the CSS selector affected by the presence of an asterisk (*)?

Take for instance the following code snippet: (I am familiar with using a star in CSS selectors, but not with '> *') .row > * { float: right; } And then there's this one: .row.uniform > * > :first-child { mar ...

css

I am experiencing an issue where my JavaScript code does not redirect users to the next page even

I'm experiencing an issue with this code where it opens another webpage while leaving the login screen active. I've tried multiple ways to redirect it, such as window.location.href and window.location.replace, but nothing seems to be working. Ide ...

javascriptjqueryhtmlcss

Utilizing extra CSS for a full-width Wordpress featured image makes for a visually stunning design

Is there a way to customize the CSS of a featured image in Wordpress Version 5.9.2 to appear full width? Currently, the image has a large margin and does not fill the entire width as seen on the page below: I attempted to achieve this by adding code to th ...

phphtmlcsswordpress