Question 170290 in CSS Question posted in
Some basic documentation can be found here.

tag How to style normal text inline with an h6 inside an tag?

I have an <a> element that inside has an h6 and normal text. How I can style the normal text part?
I’m trying to use :not(h6) to put padding and border-radius:20px and others styles… see my css:

.uagb-taxomony-box  {
  background-color:transparent!important;
  border:none!important;
  text-decoration:none!important;
  text-align:left!important;
  
}

a.uagb-tax-link h6{text-align:left!important;}

.uagb-tax-link:not(h6){
  text-decoration:none!important;
  padding:5px!important;
  background-color:#18419C!important;
  border-radius:20px!important;
}
    <div class="uagb-taxomony-box">
        <a class="uagb-tax-link" href="https://dev3.netnerd.cat/tipus/desenvolupament-de-negoci/">
          <h6 class="uagb-tax-title">Desenvolupament de negoci</h6>
        " 16 Projectes "
        </a>
    </div>

but watch what is happening in the screenshot below:the background get separated by h6

How can I style well this?
Thanks in advance

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    As https://stackoverflow.com/users/16948533/developer has pointed I need to add a span here for properly style the no-h6 part.

    Then i've used something like:

      $('.uagb-tax-link').each(function() {
    var $link = $(this);
    var $textNodes = $link.contents().filter(function() {
      return this.nodeType === 3;
    });
    var $span = $('<span class="text-no-h6"></span>').text($textNodes.last().text());
    $textNodes.last().replaceWith($span);
  });

    And then css get's modyfied as:

    .uagb-taxomony-box  {
  background-color:transparent!important;
  border:none!important;
  text-decoration:none!important;
  text-align:left!important;
  
}

a.uagb-tax-link h6{text-align:left!important;}

span.text-no-h6{
  text-decoration:none!important;
  padding:5px!important;
  background-color:#18419C!important;
  border-radius:20px!important;
}

  2. 0

    You can give display: inline-block to "a" element. If you want to give background to only text. Then put the text in span element and give styling to it. Here is the updated code:-

    .uagb-taxomony-box  {
  background-color:transparent!important;
  border:none!important;
  text-decoration:none!important;
  text-align:left!important;
  
}

a.uagb-tax-link:not(h6){
  display: inline-block;
    text-decoration:none!important;
    padding:5px!important;
    border-radius:20px!important;
}

a.uagb-tax-link h6{
    text-align:left!important;
}



.simple-text{
  background-color:#18419C!important;
  color: #fff;
}
        <div class="uagb-taxomony-box">
        <a class="uagb-tax-link" href="https://dev3.netnerd.cat/tipus/desenvolupament-de-negoci/">
          <h6 class="uagb-tax-title">Desenvolupament de negoci</h6>
          <span class="simple-text"> " 16 Projectes " </span>
        </a>
    </div>
    Login or Signup to reply.
  3. 0

    You can use position: absolute:

    .uagb-taxomony-box  {
  background-color:transparent!important;
  border:none!important;
  text-decoration:none!important;
  text-align:left!important;
  
}

a.uagb-tax-link h6{text-align:left!important;}

.uagb-tax-link {
  display: inline-block;
  margin-top: 80px;
  position: relative;
  text-decoration:none!important;
  padding:5px!important;
  background-color:#18419C!important;
  border-radius:20px!important;
  color: #fff;
}
.uagb-tax-link h6 {
  position: absolute;
  top: -80px;
  color: #000;
}
    <div class="uagb-taxomony-box">
        <a class="uagb-tax-link" href="https://dev3.netnerd.cat/tipus/desenvolupament-de-negoci/">
          <h6 class="uagb-tax-title">Desenvolupament de negoci</h6>
        " 16 Projectes "
        </a>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search