Is there a way to replicate GitHub's repositories language list using CSS alone? For instance, something similar to the image shown here:
https://i.sstatic.net/Kd4iC.png
I initially tried creating a list of div elements but I'm struggling to find how to style the dots using only CSS...
<div>
<div>C 90%</div>
<div>Assembly 5.8%</div>
<div>Makefile 2.9%</div>
<div>C++ 0.5%</div>
</div>
If you want to insert dots before each item, you can utilize the ::before pseudo element.
Visit this link for more information.
Here is an example of how you can achieve this:
div > div {
position: relative;
margin-left: 10px;
}
div > div:before {
content: '';
position: absolute;
height: 5px;
width: 5px;
right: 100%;
margin-right: 5px;
top: calc(50% - 2.5px);
border-radius: 2px;
background: red;
}<div>
<div>C 90%</div>
<div>Assembly 5.8%</div>
<div>Makefile 2.9%</div>
<div>C++ 0.5%</div>
</div>Great news! I was able to achieve a similar outcome:
<div class="rows">
<div class="dot" style="color: #555555;"></div>
<div class="child">C 90%</div>
</div>
<div class="rows">
<div class="dot" style="color: #6E4C13;"></div>
<div class="child">Assembly 5.8%</div>
</div>
<div class="rows">
<div class="dot" style="color: #427819;"></div>
<div class="child">Makefile 2.9%</div>
</div>
.rows {
text-align: center;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}
.dot, .child {
vertical-align: middle;
display: inline-block;
}
.rows > .dot {
position: relative;
margin-left: 10px;
margin-bottom: 10px;
}
.rows > .dot:before {
content: '';
position: absolute;
height: 10px;
width: 10px;
right: 100%;
margin-right: 5px;
top: 20%;
border-radius: 10px;
background-color: currentColor;
}
The dot color can be adjusted using the style attribute. The only remaining task is to update the font for the language name (e.g. Assembly) and the percentage (e.g. 5.8%). Once that is done, the result will closely resemble GitHub's design.
I need a way to ensure that a specific function is only called once when used in conjunction with ng-if and ng-repeat. <td ng-if="!vm.monthView && vm.yearView=='contract-year'" nginit="vm.ContractYearBaselines()" class="baseline-data ...
When I click a button in my HTML file named `my.html`, I want to redirect the user to `about.html`. However, when I try using `$location.path("\about")` inside the controller, nothing happens and only my current page is displayed without loading `abou ...
I have two HTML files linked to two JS files. I want to save an HTML tag from HTML1 with JS1 in a Variable and export it. Then import it in the JS2 file and use it in HTML2 I have tried many ways but nothing seems to work, something as simple as this Exp ...
Struggling with implementing tab functionality on my navigation bar using Bootstrap. The tab links change the URL, but the content of the tabs doesn't update accordingly. I'm using Bootstrap 4 - do I need to add jQuery code to make this work? Wha ...
Is there a way to add an image on a button? I've been attempting to create a banner-like element for a large button, but the image doesn't seem to integrate inside the button as desired. https://i.sstatic.net/UYxEt.png I aim to have the image co ...
I'm looking for help with passing the text value from one HTML paragraph element to another when a JavaScript function is called. The function loads a div element with an enlarged image and a paragraph content. Below is the code I am using: JavaScrip ...
I need the left div to stay in sync with the scrolling content. However, there is a challenge because this div is taller than the screen. I want the user to be able to see the bottom of the left div when they reach the bottom of the page. My solution invo ...
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Boot ...
I am currently utilizing pandoc for the conversion of a standalone html file (without external dependencies), incorporating all necessary css and js within the html itself. Within this HTML document, there are several svg graphs that have been generated th ...
Align text to the right when it overflows its parent element. https://i.sstatic.net/nTRjc.png Check out my code example here: https://stackblitz.com/edit/react-jjno6n ...
What is the best way to resolve this issue? Error: in_array() expects parameter 2 to be array, string given in C:\xampp\htdocs\php\index.php This is my current code: if (!isset($_GET['jenis'])) { $jenis = ""; } else { ...
How can I center the navigation bar both horizontally and vertically? I've tried various methods but nothing seems to work. Here is my HTML: <section class="navigation" ng-controller="NavController"> <div class="nav-container"> ...
PostCSS Configuration module.exports = { plugins: { "postcss-import": {}, "tailwindcss/nesting": {}, tailwindcss: {}, autoprefixer: {}, }, }; Global CSS Styles .form-control { @apply w-full px-3; & p { @ ...
I have a group of div elements arranged side by side with the float:left style as shown below: <div id="container"> <div id=0" style="float:left">> Stuff </div> <div id=1" style="float:left">> Stuff </div> < ...
Can you help me figure out why the icon still goes into the "startSharing" section even when it is turned off? In my html file, I have the following code for the icon: <div class="startSharing"></div> And in my javascript file, I have the fo ...
My Python function generates a list that looks like this: def get_items(argument): for item in items: print item When I pass an argument to the function and print it on the terminal with "get_items(test)", I get: item1 item2 item3 Now, ...
Inside one div, there is a form containing two input text fields and a button. Upon clicking the button, the method createProject.register is triggered and the values from the input fields are saved in a database table. <h:outputText id="opt" value="# ...
I'm having trouble loading a CSS file when trying to import it into another CSS file. I've tried various ways of defining the path but nothing seems to work. Any insights on what might be causing this issue? https://i.sstatic.net/IwaY1.png ...
So, I find myself in a bit of a bind trying to come up with a title for this question. I have stumbled upon some HTML files that seem so complex, they could only have been crafted by the one and only Lord Lucifer himself. These files contain segments like ...
Is it possible to use multiple versions of jQuery on a single page? I need two different versions for various functions, but they seem to be conflicting with each other. If I implement jQuery noconflict, will the product scripts still work? <script typ ...