How do I resize the image? I have tried using properties like height, width, etc, but this does not work. I can't seem to resize it if I pull it from inside the CSS

.project p::before {
    content:url('logo.png');
    position:relative; /* or absolute */
}

CodePudding user response：

By default, pseudo-elements such as ::before have a display of inline, so size properties such as width and height do not apply to them. To correct this, you will need to set it to display: inline-block or display: block.

In addition to this, instead of using content to load the URL, you'll need to set content to an empty value and make use of background (or background-image) for the image itself.

This can be seen in the following:

.project p::before {
  background-image: url('http://placekitten.com/100/100');
  background-size: cover;
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
  content: ''; /* Required */
}

<div >
  <p></p>
</div>

CodePudding user response：

Make the content blank and put the image as the background. Then you can set the width and height of the pseudo element and manipulate the picture with background properties like size or position. More here https://www.w3schools.com/cssref/pr_background-position.asp

.project p::before {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    background-img: url("some url here");
    background-origin: center;
    background-size: cover;
}