article preview manipulate display attribute with js

Community feedback

• 

  LouisVerch•180

  @LouisVerch

  Posted 8 months ago

  • Hey ! Not so sure about what you mean with the share link box but if you mean the pop-up and especially the triangle under it you need to use the pseudo-element ::after on the div you want to style

  • Explanation about the pseudo-element : Documentation

  • Then you should create an empty triangle with this styling on your div :

  your-div::after
  {
      content: '';
      position: absolute;
      bottom: XX%; //(xx depends on the size of the triangle you want on the y axis
      left: 50%;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 10px solid #thecoloryouwant ; //Experiment with other sizes than 10 px if you want 
      z-index: 2; // so that it comes on top of the document
  }
  

  • This codepen explains it quite well : codepen

  • As for the shadow you can use the box-shadow property : box-shadow-documentation

  • By the way you should use more semantic HTML on your divs some of them have no class or Ids

  01

  Marked as helpful