Insert a line below the active tab button

I made three buttons for three different tabs.

Is there a way to include an underline below the active tab button (under the red "zone")?

I'm aiming for something similar to mat-tab.

Any assistance is appreciated!

DEMO

Code

 viewMode = 'tab1';

 <div class="d-flex flex-nowrap myrow">
    <a (click)="viewMode ='tab1';" class="btn" [class.activebtn1]="viewMode == 'tab1'" rel="tab1">TAB1 BUTTON
    </a>
    <a (click)="viewMode ='tab2'" class="btn" [class.activebtn]="viewMode == 'tab2'" rel="tab2">TAB2 BUTTON
    </a>
    <a (click)="viewMode ='tab3'" class="btn" [class.activebtn]="viewMode == 'tab3'" rel="tab3">TAB3 BUTTON
    </a>
  </div>

 <div [ngSwitch]="viewMode" style="margin-top:50px">
    <div id="tab1" *ngSwitchCase="'tab1'" [@slideInOut]>
   <span>TAB1</span>
    </div>
    <div id="tab2" *ngSwitchCase="'tab2'" [@slideInOut]>
       <span>TAB2</span>
    </div>
    <div id="tab3" *ngSwitchCase="'tab3'" [@slideInOut]>
        <span>TAB3</span> 
    </div>
</div>

Example

https://i.sstatic.net/0hfww.png

htmlcssangulartypescript

Answer №1

Check out the live demonstration

Utilizing pseudo-elements is the key to adding underlines to active buttons:

.activatedbtn {
  /* This property ensures that the ::before pseudo-element is positioned absolutely 
     in relation to the button itself. */
  position: relative;
}

.activatedbtn::before {
  content: '';

  /* The underline is absolutely positioned in relation to the button. */
  position: absolute;

  /* Aligns the underline at the bottom of the button. */
  bottom: 0;

  left: 0;
  width: 100%;
  height: 2px;
  background: blue;
}

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

Horizontal scroll functionality featured in a D3 bar graph

I'm currently working on implementing a bar graph with a selection dropdown that includes 3 values: By Date, By Week, By Month (where 'By Date' is the default option). When retrieving data from the backend for 'ByDate', I have a l ...

javascriptangulartypescriptd3.js

Issue: Angular Application experiencing failure during NGCC operation execution

As I work on my Angular Application in VS Code, I keep encountering popups when opening the application. Despite this, the 'ng serve' command functions properly and successfully runs the app. However, I am noticing an error in the console with t ...

angular

Issues encountered when trying to use nested CSS styling in conjunction with asp.net controls

When trying to apply an internal stylesheet to an aspx page, the challenge arises when the style code is structured in a nested manner like this...... <style type="text/css> .formStyle{ } .formStyle ul{ //some style; } .formStyle ul li{ //some s ...

htmlcssasp.net

What is the best way to prevent ngFor from repeating the input values being typed?

How can I prevent the same word from being repeated in all the inputs when using ngFor to create multiple inputs? https://i.sstatic.net/kqh5X.png Here is my code snippet: <div class="" *ngFor="let publication of publications"&g ...

javascriptangulartypescriptngfor

What methods can I use to analyze the integrity of the data's structure?

Currently working on an API using NestJS and typeorm. I am in need of a way to verify the format of the data being returned to clients who make requests to it. For instance, when accessing the /players route, I expect the data to have a specific structure ...

javascripttypescripttestingnestjs

Displaying PHP output within a JavaScript expression

Let's dive into a scenario involving a basic HTML document and some JavaScript that's loaded within it: <!-- doc.html --> <!doctype html> <html lang="en"> <head> <script type="text/javascript" src=" ...

phpjavascripthtml

Tips for changing the color of shapes when hovering over an image state

I have arranged three images in a column and applied column-count: 3; along with setting border-width for those images. Now I am curious about how to create the hover state for these images. Here is the HTML code snippet: <div class="wrap"> < ...

htmlcss

The session name has not been properly defined

Sorry for any errors in translation. I'm facing an issue where the session name I insert is coming up as undefined. However, when I manually enter the username, everything works fine. View Image <? php session_start (); echo var_dump ($ _SESSION ...

phphtmlajax

using async and await to avoid receiving 0 when accessing the array length of objects

Currently, my task involves searching for data in localStorage, then pushing this data (objects) to an array. However, when attempting to loop through this array of objects, I encounter an issue where the length is 0. I understand that I need to use async/ ...

angulartypescriptionic4

Unexpected issue on AngularJS application

Encountering issues with incorporating a controller into my page - each time I add it to a DOM element, an error is thrown. Here's the structure of my HTML page: <html data-ng-app="sportsStore"> <head> <title>Sports Sto ...

javascripthtmlangularjsangularjs-directive

Looking to retrieve the selected item from the list using console.log

Brief explanation: I am trying to retrieve the clicked item from a list using console.log(i.match). Please refer to my **home.html** code snippet below for how the list is dynamically generated. home.html <ion-card> <ion-card-content *ngFor="l ...

angularionic-frameworkionic2ionic3

Employing jQuery's offset() method for scripting

Issue: The problem I'm facing is that after clicking on the label where the date should be entered, the calendar is not appearing as expected. I tried using a jQuery script to darken the background, but then the calendar is not displaying in the corre ...

javascriptjquerycss

I need to achieve success in a straight line, but my outcome is veering off course

I am looking for a specific outcome: https://i.sstatic.net/XUnrR.png This is the desired result: https://i.sstatic.net/XUnrR.png Utilizing Bootstrap version 4.4.1 attempting to use grids with no success <body> <div style="margin-left: 7 ...

htmlcssbootstrap-4frontend

Enhance your table with custom styling by incorporating the seanmacisaac table and placing the tbody within a div

I am looking to make adjustments to a Jquery sortable, searchable table created by seanmacisaac. For more information, visit the link: Does anyone know how to set the height of the tbody to a fixed value while allowing vertical scrolling (overflow-y)? & ...

javascriptjquerycssscrollhtml-table

Implementing a Delay in an Angular 4+ AsyncValidator with the Use of RxJS 6

I am currently grappling with the interpretation of this article, but due to recent updates in RxJS, the syntax I require seems to have changed. There is a particular aspect that eludes me. The existing validate method within my AsyncValidator appears as f ...

angularrxjs

Issues arise when attempting to connect with mysql2 in typescript jest tests on macOS, where the connection

Having issues creating a mysql2 connection to a local MySQL database in a jest test on macOS using TypeScript. The call to connect() is getting stuck. Environment: MacOS: High Sierra (10.13.6) MySQL: 8.0.18 TypeScript: 3.7.2 mysql2: 2.0.1 Node.js: v10.1 ...

node.jstypescriptmysql2

Clicking while holding down the control key in Chrome causes the frame on my website to

My website consists of two frames - the main menu on the left and the content displayed on the right. However, I have noticed that when users use control+click in Chrome to open a new tab, the iframe page is displayed without the menu. Is there a way for ...

javascripthtmliframeframe

Automatically selecting the country phone code based on the country dropdown selection

When the country dropdown is changed, I want the corresponding phone code dropdown to be dynamically loaded. <div class="row"> <div class="col-sm-8 col-md-7 col-lg-6 col-xl-5 pr-0"> <div class="form-group py-2"> <l ...

c#htmlangulartypescript

Mathematics: When the numbers just don't add up

Can you help me figure out this calculation? €70.00 Total VAT €12.6 Total €82.59 I'm puzzled as to why the total jumps from 12.6 to 82.59. Is there a known issue causing this discrepancy? ...

htmlasp.net

Components in Angular 2 rc6 are failing to load

Since upgrading my APP to rc6, I've been experiencing some issues with component loading/rendering. In my APP, I categorize components into routing_components and util_components. Interestingly, the routing_components are working perfectly fine while ...

angularangular2-components