htmlcssimagebackground-image

How to insert an image + text hyperlink inside a html paragraph?


I have the following setup:

  <div id="readme">
    <div id="title-container">
      <div id="readme-title">
        <b>some text</b>
      </div>
      <img src="...">
    </div>
    <div id="content-container">
      <h1>some text</h1>
      <p class="text-content">some text</p>
      <h1>some text</h1>
      <div class="heading-container">
        <h2>some text</h2>
        <p class="date">some text</p>
      </div>
      <p class="text-content">some text</p>
        <a href="..." class="redirect">
          <span class="redirect-image"></span>
          <span class="read-more">Read more...</span>
        </a>
    </div>
  </div>
  <div id="preload-redirect-hover"></div>
#readme {
    margin-top: 13.5svh;
    margin-bottom: 15px;
    width: 650px;
    background-color: #353954;
    border: solid;
    border-radius: 10px;
}

#title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-bottom: solid;
    font-size: 1em;

    img {
        display: block;
        height: 24px;
    }
}

#content-container {
    padding: 10px 15px;

    h1 {
        width: 100%;
        margin: 0; /* remove browser's default margin */
        font-size: 1.5em;
        color: #f9b17a;
        border-bottom: solid black 3px;
    }
}

.text-content {
    width: 100%;
    margin: 0; /* remove browser's default margin */
    padding: 5px 0px; /* add spacing between the lines */
    font-size: 1.1em;
    color: #d0daec;
    line-height: 1.3;
}

.heading-container {
    display: flex;
    width: 100%;
    margin: 0px auto;
    padding: 10px 0px;
    align-items: center;
    justify-content: space-between;
    border-bottom: solid 2px;

    .date {
        white-space: nowrap;
    }

    h2 {
        width: fit-content;
        font-size: 1.1em;
        margin: 0; /* remove browser's default margin */
        color: #f0f0F9;
        border: none;
    }

    p {
        margin: 0; /* remove browser's default margin */
        font-size: 1em;
        color: #f0f0F9;
    }
}

.redirect {
    display: flex;
    width: fit-content;
    text-decoration-color: #f9b17a;

    .redirect-image {
        height: 24px;
        width: 24px;
        background: url("../media/readme/redirect.png");
        background-size: cover;
    }

    .read-more {
        place-content: center;
        color: #f9b17a;
    }
}

.redirect:hover {
    text-decoration-color: white;

    .redirect-image {
        background: url("...");
        background-size: cover;
    }

    .read-more {
        color: white;
    }
}

#preload-redirect-hover {
    width: 0px;
    height: 0px;
    background: url("...");
}

This is the result

My question is - is it possible to have the hyperlink (the redirect image + text) on the same line as the text in the paragraph and how? Thank you in advance!

I tried inserting the hyperlink in the paragraph, adding no-wrap css but these did not work.

Edit: Updated the html + css to be more concrete as one of the answers seems to work on its own, but not for me.


Solution

  • Move the link inside the paragraph and remove the flex setting

    .redirect {
      text-decoration-color: #f9b17a;
    }
    
    .redirect-image {
      display: inline-block;
      vertical-align: bottom;
      height: 24px;
      width: 24px;
      background: url("https://picsum.photos/id/23/300/300");
      background-size: cover;
    }
    
    .read-more {
      color: #f9b17a;
    }
    <p>
      some text....
      <a href="#" class="redirect">
            <span class="redirect-image"></span>
            <span class="read-more">Read more...</span>
        </a>
    </p>